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

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

1. エフェクトHTMLを送信する

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

CS

#送信ボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ: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);
  }
}

画像

ホバー効果送信

2. ネオン効果 HTML

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

CS

#ネオンボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースを空ける;
  高さ: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);
}

画像

ホバー効果ネオン

3. ボーダー効果 HTML

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

CS

#境界線を描く {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ: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;
}

GIF効果

ホバー効果描画

4.円形効果HTML

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

CS

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

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

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

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

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

画像

ホバー効果円

5. 角丸効果 HTML

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

CS

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


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

画像

ホバー効果半径

6. フリーズ効果HTML

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

CS

#フリーズしたボタン{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ: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 {
  背景位置: 左下;
}

画像

ホバー効果凍結

7. 光沢のある効果の HTML

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

CS

#光沢のある影 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  高さ: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);
}

画像

ホバー効果の光沢

8. 読み込みエフェクトHTML

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

CS

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

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

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

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

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

画像

ホバー効果の読み込み

要約する

ページボタンを目立たせるには:before:afterなどの疑似要素を活用します。

目を引く CSS HOVER エフェクト 8 個とサンプル コードについての記事はこれで終わりです。CSS HOVER エフェクトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

>>:  VueとVueComponentの関係の詳細な説明

推薦する

MySQL 5.7 の /etc/my.cnf パラメータの紹介

以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...

VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)

1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...

Linuxにpipパッケージをインストールする方法

1. システムの Python バージョンに応じて、pip インストール パッケージをダウンロードし...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...

Windows で MySQL サービスを停止または削除できない問題の解決策

圧縮パッケージを解凍して Windows に MySQL をインストールしました。インストール方法は...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析

Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...

mysql データ型変換の実装

1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...

Javascript における非同期待機の詳細な理解

この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...

MySQL XA で分散トランザクションを実装する方法

目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...