2017

CSSとアイコンで作るボタン

最終更新日:2018/01/08

個人的によく使うものをまとめました。
本当に個人的なものなので、特に目新しいものはありませんが、すぐにコピペできるようにストックしていきます。

今回は下記の形で<a>要素で作成しています。

</>html

<a href="#" class="button">詳細を見る</a>

ベースのボタン設定

See the Pen button01 by maikatou (@logequal) on CodePen.dark

まずはベースとなるシンプルなボタンです。
これだけでも十分ボタンとして機能していますね。
角丸の設定を5pxにしていますが、これを変えるだけでも見た目の印象が変わるので、毎度デザインによって変更しています。

See the Pen JNyBxa by maikatou (@logequal) on CodePen.dark

先程のベースのボタンにアイコンを追加しました。
これもよく使う&よく見るパターンです。

アイコンは出ました皆大好き、Font Awesome(笑)
アイコンをwebフォントとして使用できるものですね。とっても便利。

Font Awesomeの詳しい解説は省きますが、<head>内に以下のコード入れることを忘れないようにしましょう。

</>html


<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

気に入ったものがない場合は自分でアイコンを作ることもあります。
Font Awesomeのシェブロンの線が太いなー、角をもう少し丸くしたい… ということがデザインをしていると気になってくると思うので、その際はアイコンを作りましょう。

See the Pen eWELOV by maikatou (@logequal) on CodePen.dark

上記で作成したボタンに、ホバーエフェクトを加えます。
ホバーでボタンを押したように見えるエフェクトです。
これも本当によく使います。ポップなデザインによく合うかな…

ポイントとしてはtransitionを設定することで、動作が滑らかになりますね。これがないとカクカクしてしまいます。

See the Pen YVxOXm by maikatou (@logequal) on CodePen.dark

ホバーの際にボタンが少し白っぽくなるエフェクトです。
opacityで透明度を調整しています。

See the Pen pPrOra by maikatou (@logequal) on CodePen.dark

ホバーすると背景色が変わります。
これもよくありますね。ホバーしている感が一番分かりやすいですね。

ホバーエフェクトはスマホではあまり意味をなさないので、PC向けという感じがしていました。しかし調べてみるとjqueryで設定ができるようなので、試してみてもいいかなーと思ってみたり。

また新たなボタンを使用した場合は、UPしていきます。あと、次回予告として<form>で使用する<button>要素のcssもUPしようと思っています。