【CSS】aタグを用いてボタンを作る方法

aタグをインラインブロック化する

aタグはインライン要素なので、paddingやmarginは無視されるため、ボタンっぽいものを作ることができません。そのため、aタグをインラインブロック要素にする必要があります。

aタグに「.button」というクラスを加え、display:inline-block;を指定してやります。これだけで、aタグのpadding等を指定することができるようになります。

CSS


.button{
  background-color: #239b76;
  padding:8px 24px;
  display:inline-block;
}

上のコードは実際には次のようになります。

ボタン

ボタンの角を丸くする

ボタンの角を丸くする場合には、border-radiusを使います。値を指定すれば、丸さ具合を調節することができます。

CSS


.button {
background-color: #239b76;
padding: 8px 24px;
display: inline-block;
opacity: 0.8;
border-radius:5px;
}

ボタン

4隅の丸さ具合を変えることもできます。

CSS


border-radius: 10% 30% 50% 70%;

ボタン

ホバーした時に色を変える

疑似クラスhoverを使うと、実現することができます。

CSS


.button:hover {
 background-color: red;
}

webアイコン（Font Awesome）を使う

twitterやFacebookなどのアイコンを使う場合には、Font Awesomeを使うと便利です。Font Awesomeを使うには、cdnを使うと便利です。cdnとは、アイコンをダウンロードなどをしなくとも、サーバー上から勝手にもってくることができる仕組みです。

cdnはheadタグ内で読み込む必要があります。下はbootstrapのcdnです。

CSS


 <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>

Font Awesomeから直接linkを張ることもできます。その際には、登録が必要です。

また、Font Awesomeには、単にアイコンだけでなく、アイコンを回転させるクラスなども準備されています。詳しくはサルワカさんのブログに紹介されています。

実際には<i class=”fa fa-gratipay fa-5x”></i>のような書き方をします。

fa fa-〇〇〇というものがあったり、fab fa-〇〇〇というものもあったりしますが、とりあえずサイトに行ってコピペすればＯＫです。

ボタンに影をつける・カーソルをポインタに変える

ボタンっぽいボタンにするために影をつけましょう。box-shadowを使います。また、ホバーした際にカーソルの形を変えてみましょう。cursor:pointer;でポインターになります。

.button {
background-color: #239b76;
padding: 8px 24px;
display: inline-block;
opacity: 0.8;
border-radius:5px;
box-shadow:0px 7px #1a7940;
cursor:pointer;
}

ボタン

クリックしたらアクションをつける

また、クリックした時にアクションをつけるには:actionの疑似クラスを使用します。:activeはクリックされた際のCSSを指定します。

position:relative;としてやり、位置を変えることで、ボタンが凹むようなアクションをつけることも可能です。

.button:active{
  box-shadow:none;
  position:relative;
  top:6px;
}