こんなリンクボタンも作れますよ！

こんにちは、パソコンインストラクターの川上雄大です。

インターネットのベースは「リンク」です。

そして、押してほしいと思っているリンクの枠は、ボタンの方が押しやすかったりします。

そう、ボタンはボタンらしくした方が良いです。

ただ、普通、ボタンを作るには画像で作成するのが一般的ですが・・・

このように、こちらの記事『5つの効果で作る、よく使うCSS3ボタンデザインサンプル集』のように、CSSでリンクボタンを作ることもできます。

こちらの↑記事を参考にして、

アメブロでもHTMLタグでリンクボタンを作ってみました↓（画像の例です）

パターン１．

詳しくはこちら

<a href="#" style="background: #EEE;border-top: 1px solid #DDD;border-left: 1px solid #DDD;border-right: 1px solid #BBB;border-bottom: 1px solid #BBB;color:#111;width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a>

パターン２．

詳しくはこちら

<a href="#" style="background: -moz-linear-gradient(top,#FFF 0%,#EEE);background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));border: 1px solid #DDD;color:#111;width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a>

パターン３．

詳しくはこちら

<a href="#" style="background: -moz-linear-gradient(top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));border: 1px solid #DDD;color: #FFF;width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a>

パターン４．

TOPへ

パターン５．

詳しくはこちら

<a href="#" style="background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));border: 2px solid #DDD;color: #111;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a>

パターン６．

詳しくはこちら

<a href="#" style="background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));color: #FFF;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #0099CC;-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);text-shadow: 0px 0px 3px rgba(0,0,0,0.5);width: 100px;padding: 10px 0;text-decoration: none;font-weight: bold;text-align: center;font-size: 13px;display: block;">詳しくはこちら</a>

（注意！a href="#"　の#はリンク先のURLを指定してくださいね。）

また、自分の好きなグラデーションを作りたい方は、

CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor-

をご参考にされるとよいですね。

以上、アメブロ便利技でした。

LIDS札幌・ライフデザインスクール
川上雄大