CSS(CSS3)だけで一瞬グラデーションに光るボタンを設定する方法
29.10.14 20:36 | コメント(0)
CSS3(スタイルシート)で一瞬グラデーションに光るボタンを設定
CSS3(スタイルシート)で出来る、一瞬グラデーションに光るボタンの設定方法をご紹介いたします。
【一瞬グラデーションに光るボタン】
.botan02 { display: block; cursor: pointer; width: 150px; margin: 0 auto; padding: 15px; text-align: center; text-decoration: none; border-radius:12px; box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px; -webkit-box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px; -moz-box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px; -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s; transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s; background-color:#00d889; } .botan02 a{ color: #fff; } .botan02:hover { animation: gradation 1s; } @keyframes gradation { 0% { background-color:#d3ea12; } 100% { background-color: #F66; } }以上がCSSで一瞬グラデーションに光るボタンの設定方法が完了です。
コメントする
おすすめの記事
自作パソコンの組み立て方法②(パソコンを組み立てる方法)
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して情報を表示させる方法
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して管理画面プロフィールを編集する方法
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
WordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
WordPress(ワードプレス)権限グループ別(管理者、編集者、投稿者、寄稿者、購読者)のLevelと所有権限
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
WordPress(ワードプレス)管理画面記事投稿画面の内容を固定で「表示・非表示」する設定方法
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
Facebookでコメントする