【CSSメモ】勝負どころで使いたい！リンクボタンの作り方

リンクをボタンにしたいんだけど・・・！？

どうも、Linです。うどんに、コシがあります。

WordPress のブログを運営しているとたまに、

どうしても読者の方にクリックしてもらいたいリンク

が出てくると思います。

そういう勝負時に使いたいのが、

ボタンデザインのリンクです。

CSS をカスタマイズすることで、aタグのリンクをボタンにデザインできます。

すると、リンクが目に留まりやすくなり、クリック率が高まる可能性がありますね。

ぼくもそろそろ勝負したいと思っていたところだったので、こちらの神記事でリンクのボタンの作り方を学んでみました↓

サルワカ | サルでも分かる図解説明マガジン

CSSで作る！押したくなるボタンデザイン100（Web用）

https://saruwakakun.com/html-css/reference/buttons

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

今日は学んだことを忘れないうちにアウトプットしておこうと思います。

CSS を変更してリンクボタンを作る方法

ボタンデザインのリンクを作る方法は次のステップを踏むと良いでしょう。

Step1. aタグにクラス名（ボタンっぽい）をつける

まず始めにa タグに「ボタンぽい」クラス名をつけておきましょう。

今回は例として、

botan

というクラス名をつけてみますか。

例えば「リンク」という文字をリンクにした場合、こんな感じのHTMLコードになるはずです↓

<a href="#" class="botan">リンク</a>

Step2. CSS ファイルにボタンのデザインを追記

先ほど追加したaタグをボタンデザインに変更するため、 CSS ファイルを編集していきます。

こちらの神記事に様々なボタンデザインが掲載されているのでお好きなものを選んで CSS ファイルに追記すると良いでしょう。

WordPress のブログの場合はstyle.cssというファイルに追記すればいいですね

ぼくはその中から、

クリックするとボタンが押し込むタイプ

を採用しました。

botanというクラス名をもつaタグに、このデザインを適用させると、次のようなCSSになりますね↓

.botan{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #ffffff;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
}
.botan:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

a.botan{
	text-decoration: none;   
    color: #ffffff;
    
}