クリックしたくなるボタンとは？
今月2018年9月からHTML&CSSの勉強を始めました。
そこで、思わず押したくなるリンクはどのようなデザインか色々と研究しています。
今回はリンクをボタン風にカスタマイズしてみたいと思います。
押したくなるリンクについて考える
【パターン１】
【パターン２】
あんなことが参考になりました。ここはダメで、あそこは分かりやすかった
初心者がたった3週間でホームページを作成！？
プログラミング学習の感想で、あーたらこーたらその経験を書いています。
このようにリンクを押したくなるようなボタンはどのようなボタンか考えてみます。
リンクを装飾する
色付け
アンカーの背景色と文字の色を変えてみます。
リンクさせたい文字
a {
background-color: #1fbaa0;
color: #ffffff;
}
リンクする「aタグ」(アンカータグ)に対して、CSSはこのように記載しています。
背景色を緑色(カラーコードは#1fbaa0)に、文字色を白にしています。
#ff|ff|ff
「#ffffff」は最初の2桁が赤色、次の2桁が緑色、最後の2桁が青色のカラーコードを表し、それぞれ16進数表記です。
赤、緑、青を全て"ff"にすると文字は白色になります。
padding
色が付いて見栄えが良くなりましたが、少し窮屈なので、上下左右に10pxずつpaddingでボタンを広げてみます。
a {
background-color: #1fbaa0;
color: #fff;
padding: 10px;
}これで少しボタンに余白ができました。
角を丸める
次は角ばっているので、角を丸めます。
a {
background-color: #1fbaa0;
color: #fff;
padding: 10px;
border-radius:5px;
}
立体的にする
次に立体的なボタンにしてみます。
ボーダーをつけ、ボーダーラインを4px、スタイルを「outset」に設定してみます。
a {
background-color: #1fbaa0;
color: #fff;
padding: 10px;
border-radius:5px;
border:4px solid #1fbaa0;
border-style:outset;
}
カーソルを合わせたときのアンダーラインを消す
カーソルを合わせたときにアンダーラインが出るのがカッコ悪いので、アンダーラインを消します。
アンダーラインは「text-decoration:none;」とします。
a {
background-color: #1fbaa0;
color: #fff;
padding: 10px;
border-radius:5px;
border:4px solid #1fbaa0;
border-style:outset;
text-decoration:none;
}
カーソルを合わせたときに不透明度を下げる
アンダーラインが出なくなった分、変化が分からないので、カーソルを合わせたときに不透明度を下げます。
a {
background-color: #1fbaa0;
color: #fff;
padding: 10px;
border-radius:5px;
border:4px solid #1fbaa0;
border-style:outset;
text-decoration:none;
}
a:hover {
opacity:0.8;
}
これで大分押したくなってきました。
先頭にawesomeフォント(https://fontawesome.com/)のbook-open辺りを挿入するとなお良い感じになるかと思います。
なお、awesomeフォントの使い方などについては、下記のページにまとめてみました。
始めて制作したページに関する内容で、他にもgoogleフォントやレスポンシブ対応などについてもまとめてあります。
こちらも是非見てください。
