広告 ブログ運営

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

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

ボタン

今月2018年9月からHTML&CSSの勉強を始めました。

そこで、思わず押したくなるリンクはどのようなデザインか色々と研究しています。

今回はリンクをボタン風にカスタマイズしてみたいと思います。

 

押したくなるリンクについて考える

【パターン1】

初心者がたった3週間でホームページを作成!?

 

【パターン2】

こんな事がありました。こんな事がありました。そういえばあんなことも・・
あんなことが参考になりました。ここはダメで、あそこは分かりやすかった
初心者がたった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ページ

 







人気の記事

1

    こんな方におすすめ 直流(DC)と交流(AC)の違いについて知りたい 直流(DC)の交流(AC)について、それぞれ特徴を知りたい   電気の流れる向き・電流・電圧が変わるの ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

    オペアンプの反転増幅回路 オペアンプの反転増幅回路は下図のようになります。 反転増幅回路の入力電圧をVi、出力電圧をVoとすると下記の式で表されます。   オペア ...

アノードコモンとカソードコモン 3

  LEDのアノードとカソードについてとその見分け方 「アノードコモン」と「カソードコモン」について説明する前に、LEDのアノードとカソードについて説明します。   LEDは正しい ...

4

という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget="_blank"が関係しているようだと。でも正確 ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

  MyLinkBoxで商品紹介できる広告主一覧 MyLinkBoxで商品紹介できる広告主一覧は下記の通りです。 カテゴリー 広告主一覧 モール(物販) Yahoo!ショッピング/楽天市場/ ...

miMind使いかたアイキャッチ 6

      私もよく情報を整理するためにマインドマップを作成しています。 何か思いついたときにメモ代わりとして使用する事もあり、常に携帯しているスマホでマインドマップを作 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPythonなどのコースを購入しています。プログラミングだけでなく、動画編集や写真撮影など様 ...

ブレッドボード の使い方のアイキャッチ 8

  こんな方におすすめ ブレッドボードの使い方を知りたい ブレッドボードの使い方:ブレッドボードとは?ブレッドボードの仕組みについて   ブレッドボードは電子部品の足を差し込むだけ ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き 数字有り箇条 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-,