CSSで実装するボタンデザインとホバーエフェクトのアイデア
- Colorful CSS Buttons
- Animated CSS3 Buttons
- 20 Button Hover Effects
- Six Pure CSS Button Hover Animations
- Collection of Button Hover Effects
- Gradient hover animated button
- Amy Winehouse Doc Button
- Blobs button
- Rotating Icon Buttons
- Twitter Button Concept
- CSS3 Social buttons vol.1
- Gradient Buttons
- Pressable CSS Buttons
基本的なCSSボタンの作り方
<a>タグでのCSSボタン
aタグをブロック要素にしたシンプルなCSSボタンのデザイン例。マウスオーバー:hover
でボタンの背景色を変化させ、変移をスムーズ(なめらか)にアニメーションさせるようにtransition
を設定しました。
<a class="button01" href="#">Button</a>
.button01{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button01:hover{ background-color: #f9c500; /*ボタン色*/ }
<input>タイプのCSSボタン
フォームで使われるボタンsubmit
button
のCSSも大体同じ設定。フォームのボタンはボーダーが残るのでborder: none;
としてボーダーを消します。
<input type="submit" class="button02" value="CSSボタン">
.button02{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button02:hover{ background-color: #f9c500; /*ボタン色*/ }
立体的なCSSボタン
よくみられるフラットでありながら立体感のあるCSSボタン。クリック(ボタンを押しこむ):active
表現を加えたデザイン。
<a class="button03" href="#">Button</a>
.button03{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-bottom: solid 6px #ec6c00; /*下線色*/ border-radius: 5px; /*角丸*/ } .button03:hover{ background-color: #f9c500;/*ボタン色*/ border-bottom: solid 6px #f39800; /*下線色*/ } .button03:active { margin-top: 6px; border-bottom: none; -webkit-transform: translateY(6px); /*下移動*/ transform: translateY(6px); }
アイコンフォントを使用したCSSボタン
③のボタンにアイコンフォント「FontAwesome」をテキスト文頭に配置したCSSボタン。簡単にCSSのみでデザインされたボタンを作成できます。
FontAwesomeが発行しているCSSをhead
内にリンクを貼ります。後は使用したいアイコンをFontAwesomeで検索して、コード<i class="fas fa-chevron-circle-right"></i>
を文頭にコピペするだけです。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<a class="button04" ><i class="fas fa-chevron-circle-right"></i> CSSボタン</a>
.button04{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-bottom: solid 6px #ec6c00; /*下線色*/ border-radius: 5px; /*角丸*/ } .button04:hover{ background-color: #f9c500;/*ボタン色*/ border-bottom: solid 6px #f39800; /*下線色*/ } .button04:active { margin-top: 6px; border-bottom: none; -webkit-transform: translateY(6px); /*下移動*/ transform: translateY(6px); }
FontAwesomeの使い方については↓の記事をご覧ください。
CSSボタンの制作で役立つサイト
Creative Button Styles
Button Styles Inspiration
Hover.css
bttn.css
Buttons
BUTTONS
Pushy Buttons
CSSボタン制作のアイデア
Colorful CSS Buttons
Animated CSS3 Buttons
20 Button Hover Effects
ベーシックなものからフラップ・シャドーまで実用的なスタイルのCSSボタン
See the Pen 20 Button Hover Effects by Rosa (@RRoberts) on CodePen.
Six Pure CSS Button Hover Animations
ボーダーと背景を入れ替えるアニメーションのCSSボタン
See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.
Collection of Button Hover Effects
ホバーエフェクトに工夫を凝らしたCSSボタン
See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.
Gradient hover animated button
アウトラインがアンダーラインに変化するキレイなCSSボタン
See the Pen Gradient hover animated button | Welcome in my world by Marcel Pirnay (@mars2601) on CodePen.
Amy Winehouse Doc Button
Blobs button
Rotating Icon Buttons
45度回転するアイコンを使用した印象的なCSSボタン
See the Pen Rotating Icon Buttons by Cole Waldrip (@colewaldrip) on CodePen.
Twitter Button Concept
立体的にフォローボタンを出現させるアイデア
See the Pen Twitter Button Concept by Erik Deiner by fatihmusal (@fatihmusal) on CodePen.
CSS3 Social buttons vol.1
5タイプのバリエーションのホバーエフェクトのアイデア
See the Pen CSS3 Social buttons vol.1 by fox_hover (@fox_hover) on CodePen.
Gradient Buttons with Background-Color Change
グラデーションに変化をつけたホバーエフェクトのアイデア
See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
Pressable CSS Buttons
- きれいなエフェクトの検索フォームUI「Inspiration for Search UI Effects」
- CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
- 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
- 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
- 様々なスニペットがまとめられたサイト「LittleSnippets.net」
- Webデザインの参考サイト | Web Design Clip - Webデザインクリップ -
- LP・ランディングページの参考サイト | Web Design Clip [L]