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の関係の詳細な説明

推薦する

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

Vue ルーター vue-router 詳細説明ガイド

中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

MySQLの基本の共通機能

目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...

収集する価値のある Linux ドキュメント編集コマンド 27 個

Linux col コマンドLinux の col コマンドは制御文字をフィルタリングするために使用...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

訪問者を惹きつけるウェブサイトコンテンツを作成する14の方法

ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...

ウェブページの背景画像を伸ばす2つの方法

解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...

Docker ファイルの保存パス、コンテナの起動コマンド操作の取得

コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する

解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...

Vue 条件付きレンダリング v-if と v-show

目次1. 動詞-if 2. <template> で v-if を使用する3. キーを使...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...

HTML ページ ソース コード レイアウトの概要_Powernode Java Academy

HTML ページ ソース コード レイアウトの概要この紹介では、Google のホームページのソー...