テキストリンクをボタン風にするcss

ブログ等でテキストにリンクを貼るとき、ただリンクを貼るだけでは味気ないとお考えの貴方に。

cssで設定してAタグ(リンクタグ)にクラス付することでボタン風に見せる方法です。


リンクタグにクラス属性をつける

テキストにリンクを貼るときは 面倒なのでビジュアルモードでリンクを貼ると思います。
その後、HTMLモードにしてclass属性をつけてあげましょう。

例 <a href="リンク先URL" class="class名">テキスト</a>

あとはcssで設定します。

こんな風になります

矢印を付けるとか→

色はお好みで

cssサンプルは下記の通り

/* リンクボタン */

.button-rink, .button-rink:visited{
       font-size:13px;
      background:#45bcd2;
      display:inline-block;
      padding:3px 7px 2px 8px;
      color:#ffffff;
      text-decoration:none;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      border-radius:4px;
      border:none;
      position:relative;
      cursor:pointer;
      margin:10px 10px 0 0;
         vertical-align: middle;
}
a.button-rink {
     color:#ffffff;
}
.button-rink a:link{
     color:#ffffff;
}
.button-rink:hover{
      background:#555;color:#fff;
}

class属性の入力は、AddQuicktag等で設定しておけば ワンクリックで呼び出せます。

may the force be with you…