CSS 8 目を引く HOVER 効果のサンプル コード

<div id="送信ボタン">
  <ボタン>
    // これはSVG送信用のプレースホルダーです
  </ボタン>
</div>

#送信ボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}

ボタン {
  背景: #5f55af;
  境界線: 0;
  境界線の半径: 5px;
  パディング: 10px 30px 10px 20px;
  色: 白;
  テキスト変換:大文字;
  フォントの太さ: 太字;
}

ボタン svg {
  表示: インラインブロック;
  垂直位置合わせ: 中央;
  右パディング: 5px;
}

ボタン:ホバー svg {
  アニメーション: fly 2s ease 1;
}

@keyframes フライ {
  0% {
    変換: translateX(0%);
  }

  50% {
    変換: translateX(300%);
  }

  100% {
    変換: translateX(0);
  }
}

<div id="ネオン-btn">
  <button class="btn one">マウスオーバー</button>
  <button class="btn two">マウスオーバー</button>
  <button class="btn three">マウスオーバー</button>
</div>

#ネオンボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースを空ける;
  高さ：100vh;
  背景: #031628; 
}

.btn{
  境界線: 1px 実線;
  背景色: 透明;
  テキスト変換:大文字;
  フォントサイズ: 14px;
  パディング: 10px 20px;
  フォントの太さ: 300;
}

。1つ {
  色: #4cc9f0;
}

。二 {
  色: #f038ff; 
}

。三つ {
  色: #b9e769;
}

.btn:ホバー{
  色: 白;
  境界線: 0;
}

.one:ホバー{
  背景色: #4cc9f0;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  ボックスの影: 10px 10px 99px 6px rgba(76,201,240,1);
}

.two:ホバー{
  背景色: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  ボックスの影: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}

.three:hover{
  背景色: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  ボックスの影: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}

<div id="境界線を描く">
  <button>マウスオーバー</button>
</div>

#境界線を描く {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}

ボタン {
  境界線: 0;
  背景: なし;
  テキスト変換:大文字;
  色: #4361ee;
  フォントの太さ: 太字;
  位置: 相対的;
  アウトライン: なし;
  パディング: 10px 20px;
  ボックスのサイズ: 境界線ボックス;
}

ボタン::前、ボタン::後 {
  ボックスサイズ: 継承;
  位置: 絶対;
  コンテンツ： '';
  境界線: 2px 透明実線;
  幅: 0;
  高さ: 0;
}

ボタン::after {
  下部: 0;
  右: 0;
}

ボタン::前{
  上: 0;
  左: 0;
}

ボタン:ホバー::前、ボタン:ホバー::後 {
  幅: 100%;
  高さ: 100%;
}

ボタン:ホバー::前{
  上の境界線の色: #4361ee;
  右境界線の色: #4361ee;
  遷移: 幅 0.3 秒のイーズアウト、高さ 0.3 秒のイーズアウト 0.3 秒。
}

ボタン:ホバー::後{
  境界線下部の色: #4361ee;
  左境界線の色: #4361ee;
  遷移: border-color 0s、ease-out 0.6s、width 0.3s、ease-out 0.6s、height 0.3s、ease-out 1s;
}

<div id="circle-btn">
  <div class="btn-container">
    // ここに SVG 要素があります <button>Hover me</button>
  </div>
</div>

#丸ボタン{ 
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}

.btn コンテナ {
  位置: 相対的;  
}

ボタン {
  境界線: 0;
  境界線の半径: 50px;
  色: 白;
  背景: #5f55af;
  パディング: 15px 20px 16px 60px;
  テキスト変換:大文字;
  背景: 線形グラデーション(右へ、#f72585 50%、#5f55af 50%);
  背景サイズ: 200% 100%;
  背景の位置: 右下;
  transition:all 2s イーズ;
}

svg {
  背景: #f72585;
  パディング: 8px;
  境界線の半径: 50%;
  位置: 絶対;
  左: 0;
  トップ: 0%;
}

ボタン:ホバー{
   背景位置: 左下;
}

<div id="border-btn">
  <button>マウスオーバー</button>
</div>

#ボーダーボタン{ 
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}
ボタン {
境界線: 0;
境界線の半径: 10px;
背景: #2ec4b6;
テキスト変換:大文字;
色: 白;
フォントサイズ: 16px;
フォントの太さ: 太字;
パディング: 15px 30px;
アウトライン: なし;
位置: 相対的;
遷移: 境界半径 3s;
-webkit-transition: 境界の半径 3s;
}


ボタン:ホバー{
右下の境界線の半径: 50px;
左上の境界線の半径: 50px;
左下の境界線の半径: 10px;
右上の境界線の半径: 10px;
}

<div id="frozen-btn">
  <button class="green">マウスオーバー</button>
  <button class="purple">マウスオーバー</button>
</div>

#フリーズしたボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}

ボタン {
  境界線: 0;
  マージン: 20px;
  テキスト変換:大文字;
  フォントサイズ: 20px;
  フォントの太さ: 太字;
  パディング: 15px 50px;
  境界線の半径: 50px;
  色: 白;
  アウトライン: なし;
  位置: 相対的;
}

ボタン:前{
  コンテンツ： '';
  表示: ブロック;
  背景: linear-gradient(左へ、rgba(255, 255, 255, 0) 50%、rgba(255, 255, 255, 0.4) 50%);
  背景サイズ: 210% 100%;
  背景の位置: 右下;
  高さ: 100%;
  幅: 100%;
  位置: 絶対;
  上: 0;
  下:0;
  右:0;
  左: 0;
  境界線の半径: 50px;
  遷移: すべて 1;
  -webkit-transition: すべて 1;
}

。緑 {
   背景画像: 線形グラデーション(右、#25aae1、#40e495);
   ボックスシャドウ: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

。紫 {
   背景画像: 線形グラデーション(右、#6253e1、#852D91);
   ボックスの影: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

  .purple:hover:before {
  背景位置: 左下;
}

.green:hover:before {
  背景位置: 左下;
}

<div id="光沢のある影">
  <button><span>マウスオーバー</span></button>
</div>

#光沢のある影 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
  背景: #1c2541;
}

ボタン {
  境界線: 2px の白実線;
  背景: 透明;
  テキスト変換:大文字;
  色: 白;
  パディング: 15px 50px;
  アウトライン: なし;
  オーバーフロー: 非表示;
  位置: 相対的;
}

スパン {
  zインデックス: 20;  
}

ボタン:後{
  コンテンツ： '';
    表示: ブロック;
    位置: 絶対;
    上: -36px;
    左: -100px;
    背景: 白;
    幅: 50px;
    高さ: 125px;
    不透明度: 20%;
    変換: 回転(-45度);
}

ボタン:ホバー:後{
  左: 120%;
  遷移: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: すべて 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

<div id="読み込み中" >
  <button><span>マウスオーバー</span></button>
</div>

#読み込みボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ：100vh;
}

ボタン {
  背景: 透明;
  境界線: 0;
  境界線の半径: 0;
  テキスト変換:大文字;
  フォントの太さ: 太字;
  フォントサイズ: 20px;
  パディング: 15px 50px;
  位置: 相対的;
}

ボタン:前{
  遷移: すべて 0.8 秒 cubic-bezier(0.7, -0.5, 0.2, 2);
  コンテンツ： '';
  幅: 1%;
  高さ: 100%;
  背景: #ff5964;
  位置: 絶対;
  上: 0;
  左: 0;
}

ボタンスパン{
  ミックスブレンドモード: 暗くする;
}

ボタン:ホバー:前{
  背景: #ff5964;
  幅: 100%;
}