マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

<button class="btn-1">ボタン 1</button>

<スタイル>
ボタン{
  位置: 相対的;
  幅: 100ピクセル;
  高さ: 40px;
  背景: なし;
  カーソル: ポインタ;
  色: #fff;
  境界線: なし;
  右マージン: 20px;
  下マージン: 20px;
}
ボタン:前、 
ボタン:後{
  位置: 絶対;
  コンテンツ： '';
  幅: 100%;
  高さ: 100%;
  zインデックス: 10;
  遷移: すべて .5 秒;
}
/* ボタン 1 */
.btn-1:前、.btn-1:後{
  高さ: 2px;
  左: 50%;
  幅: 0;
  背景: #f13f84;
  変換: translateX(-50%);
}
.btn-1:前{
  上: 0;
}
.btn-1:後{
  下部: 0;
}
.btn-1:hover:before, 
.btn-1:hover:after{
  幅: 100%;
}
</スタイル> 

<button class="btn-2">ボタン 2</button>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
.btn-2{
  背景: #333;
  高さ: 36px;
}
.btn-2:前、 
.btn-2:後{
  幅: 10px;
  高さ: 10px;
  背景: #f13f84;
  ミックスブレンドモード: 色相;
}
.btn-2:前{
  左: -2px;
  上: -2px;
}
.btn-2:後{
  右: -2px;
  下: -2px;
}
.btn-2:hover:before, 
.btn-2:hover:after{
  高さ: calc(100% + 4px);
  幅: calc(100% + 4px);
}
</スタイル> 

<ボタン class="btn-3">
  <span>ボタン 3</span>
</ボタン>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
ボタン スパン:前、 
ボタン span:after{
  位置: 絶対;
  コンテンツ： '';
  幅: 100%;
  高さ: 100%;
  zインデックス: 10;
  遷移: すべて .5 秒;
}
.btn-3{
  背景: #333;
  高さ: 36px;
}
.btn-3:前、 
.btn-3:後、 
.btn-3 span:before, 
.btn-3 span:after{
  幅: 10px;
  高さ: 10px;
  背景: #f13f84;
  ミックスブレンドモード: 色相;
}
.btn-3:前{
  左: -2px;
  上: -2px;
}
.btn-3:後{
  右: -2px;
  上: -2px;
}
.btn-3 span:before {
  左: -2px;
  下: -2px;
}
.btn-3 span:after {
  右: -2px;
  下: -2px;
}
.btn-3:hover:before, 
.btn-3:hover:after,
.btn-3:ホバー スパン:前,
.btn-3:hover span:after {
  高さ: 60%;
  幅: 60%;
} 

<button class="btn-4">ボタン 4</button>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
.btn-4{
  高さ: 34px;
  境界線: 1px 実線 #f13f84;
}
.btn-4:前、 
.btn-4:後{
  幅: 10px;
  高さ: 10px;
  境界線のスタイル: solid;
  境界線の色: #f13f84;
}
.btn-4:前{
  左: -4px;
  上: -4px;
  境界線の幅: 1px 0 0 1px;
}
.btn-4:後{
  右: -4px;
  下: -4px;
  境界線の幅: 0 1px 1px 0;
}
.btn-4:hover:before, 
.btn-4:hover:after{
  高さ: calc(100% + 7px);
  幅: calc(100% + 7px);
} 

幅: 10px;
高さ: 10px;
境界線のスタイル: solid;
境界線の色: #f13f84;
境界線の幅: 1px 0 0 1px;

<button class="btn-5">ボタン 5</button>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
.btn-5{
  背景: #333;
  高さ: 34px;
  境界線: 1px 実線 #fff;
}
.btn-5:前、 
.btn-5:後{
  幅: 10px;
  高さ: 10px;
  境界線のスタイル: solid;
  境界線の色: #fff;
}
.btn-5:前{
  左: -4px;
  上: -4px;
  境界線の幅: 1px 0 0 1px;
}
.btn-5:後{
  右: -4px;
  下: -4px;
  境界線の幅: 0 1px 1px 0;
}
.btn-5:ホバー{
  境界線の色: #f13f84;
}
.btn-5:hover:before, 
.btn-5:hover:after{
  高さ: calc(100% + 7px);
  幅: calc(100% + 7px);
  境界線の色: #f13f84;
  変換: rotateY(180deg);
} 

境界線の色: #f13f84;
変換: rotateY(180deg);

<ボタン class="btn-6">
  <span>ボタン 6</span>
</ボタン>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
.btn-6{
  オーバーフロー: 非表示;
}
.btn-6:前、 
.btn-6:後、 
.btn-6 span:before, 
.btn-6 span:after{
  背景: 線形グラデーション(右へ、rgba(0,0,0,0)、#f13f84);
  遷移: すべて 2;
}
.btn-6:前、 
.btn-6:後{
  幅: 100%;
  高さ: 1px;
}
.btn-6:前{
  上: 0;
  左: -100%;
}
.btn-6:後{
  下部: 0;
  右: -100%;
}
.btn-6 span:before、.btn-6 span:after{
  幅: 1px;
  高さ: 100%;
}
.btn-6 span:before {
  下部: -100%;
  左: 0;
}
.btn-6 span:after {
  上: -100%;
  右: 0;
}
.btn-6:hover:before{
  アニメーション: topA 1s 線形無限;
  アニメーション遅延: .5秒;
}
@keyframes topA{
  100%{
    左: 100%;
  }
}
.btn-6:hover span:after{
  アニメーション: rightA 1s 線形無限;
  アニメーション遅延: 1秒;
}
@keyframes 右A{
  100%{
    上: 100%;
  }
}
.btn-6:hover:after{
  アニメーション: bottomA 1s 線形無限;
  アニメーション遅延: 1.5秒;
}
@keyframes 下部A{
  100%{
    右: 100%;
  }
}
.btn-6:hover span:before {
  アニメーション: 左A 1秒 線形無限;
  アニメーション遅延: 2秒;
}
@keyframes 左A{
  100%{
    下部: 100%;
  }
} 

<ボタン class="btn-7">
  <svg 高さ="100%" 幅="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="outline" 高さ="100%" 幅="100%" />
    <div class="text">ボタン 7</div>
  </svg>
</ボタン>

<スタイル>
...
/* 上記の共通スタイルはここでは省略します*/
.btn-7{
  位置: 相対的;
  色: #f13f84;
  テキスト装飾: なし;
  幅: 250ピクセル;
  高さ: 50px;
  マージン: 50px 自動;
  オーバーフロー: 非表示;
}
.btn-7 .outline {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  ストローク: #f13f84;
  ストローク幅: 2px;
  塗りつぶし: 透明;
  ストロークダッシュ配列: 100 500;
  ストロークダッシュオフセット: 225;
  遷移: すべて .5 秒;
  ボックスのサイズ: 境界線ボックス;
}
.btn-7 .text {
  位置: 相対的;
  上: -35px;
  行の高さ: 1;
  文字間隔: 1px;
  テキスト変換:大文字;
}
.btn-7:ホバー .outline{
  ストロークダッシュ配列: 600 0;
  ストロークダッシュオフセット: 475;
}