CSSだけで実装するクリックしたくなる BUTTON デザイン集
[code title=”css”]//基本 .btn display: inline-block; color: #ffffff; background: orangered; padding: 15px 30px; text-decoration: none; > //角丸 .radius border-radius: 5px; > //反転 .border border: 2px solid orangered; padding: 13px30px; > //グラデーション .graduate background: #ffa670; background: linear-gradient(to bottom, #ffa6700%, #fc580065%); > .btn transition: .3s; //全てのボタンにtransition設定 > // ホバーしたら半透明 .btn.default:hover opacity: 0.5; > // ホバーしたら反転 .btn.border:hover background: #fff; color: orangered; > // ホバーしたらベタ塗り .btn.graduate:hover background: #ffa670; background: linear-gradient(to bottom, #fc58000%, #fc580065%); >[/code]
ちょっと前に流行ったスケルトンボタン スタンダード CONTACT 半透明 CONTACT 立体的 CONTACT[code title=”css”]//基本のスケルトンボタン .skerton display: inline-block; padding: 15px; text-decoration: none; transition: .3s; > .skerton.default color: #ffffff; border: 2px solid #fff; padding: 25px 60px; > .skerton.default:hover color: #1E1C93; background: #fff; > //ホバーで背景が半透明 .skerton.default.opacity:hover color: #fff; background: rgba(255,255,255,.3); > //半透明で立体的なスケルトンボタン .skerton2 display: inline-block; padding: 25px 60px; background-color: rgba(255, 255, 255, .2); border-radius: 4px; color: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7); text-shadow: 0px 1px 0px rgba(0, 0, 0, .4); transition:.3s; > .skerton2:hover background-color: rgba(255, 255, 255, .3); >[/code]
変わったボタン くぼむ CONTACT 反転 CONTACT 括弧で囲う CONTACT「押したらくぼむボタン」はグラデ以外にも背景ベタ塗りや溝の深さを変えるとバリエーションが増えます。ポイントはくぼみ効果をbox-shadowで再現し、transform: translate(0, 2px);などでコンテンツに支障が出ないようにすることです。box-shadowは影足をボカしすぎると野暮ったくなりますので、短めもしくはパキッとボカさない方がオススメ。
複雑な効果を実装したい時は擬似要素(before,after)を利用すると良いです。擬似要素を使う場合は擬似要素にbox-sizing: border-boxをセットしpaddingやborderも要素内におさめるようにしましょう。
アイコンがボヨーン CONTACT レインボー CONTACT 波紋 CONTACT 四角で囲う CONTACT ブロックぽいやつ CONTACT 背景がアニメーション CONTACT 立体的なやつ CLICK ME CONTACTおまけ：文字間に気をつけよう
まとめ
カルアカスタッフ | 運営者 関連コンテンツこれからのコーディングは再利用と効率化だ！話題のPugを使ってみた
Googleフォームの自動返信機能を追加する（後編）
fullpage screen captureで邪魔な固定表示を消して撮る方法
Googleフォームの自動返信機能を追加する（前編）
新米Webクリエイターが陥りやすいコーディングあるある・5選
これからのコーディングは再利用と効率化だ！Pugをgulpでコンパイル
注目キーワード
人気記事
- CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた
- ペンツールでベジェ曲線を描くコツはアンカーポイントの打ち方にあり！
- 【初心者向け】イラレでリボン作成 ワープで簡単変形！
- 【初心者OK】IllustratorCCで漫画風吹き出しの作り方 -中級編-
- ペンツールでベジェ曲線を練習するための初心者向けトレース素材画像
- 意外と知らない？！CSSで文頭にナンバーを自動出力する方法
- イラレの「アートボードを選択オブジェクトに合わせる」が便利！
- Illustratorの基本操作を練習できるドリルを作りました
- ベジェ曲線とは 初心者にもわかりすいよう下敷きに例えてみた
- 【初心者OK】IllustratorCCで漫画風吹き出しの作り方 -超初級編-
- フチ付き文字の作り方-チラシやLP制作に使える派手なイラレ文字装飾
© LEAD Space Corp. All Rights Reserved.