クリックしたくなるボタン【目は口ほどに物を言う】

クリックしたくなるボタンとは？

今月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フォントやレスポンシブ対応などについてもまとめてあります。

こちらも是非見てください。

初心者が3週間で制作したWebページ