テキストリンクをボタン風にするcss
ブログ等でテキストにリンクを貼るとき、ただリンクを貼るだけでは味気ないとお考えの貴方に。
cssで設定してAタグ（リンクタグ）にクラス付することでボタン風に見せる方法です。
リンクタグにクラス属性をつける
テキストにリンクを貼るときは 面倒なのでビジュアルモードでリンクを貼ると思います。
その後、HTMLモードにしてclass属性をつけてあげましょう。
[php]例 <a href="リンク先URL" class="class名">テキスト</a>[/php]
あとはcssで設定します。
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;
}
[/css]
class属性の入力は、AddQuicktag等で設定しておけば ワンクリックで呼び出せます。
may the force be with you…
