テキストリンクをボタン風にする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…

テーマのカスタマイズ等のご相談/お問い合わせはこちら
個人の方でもお気軽にご相談ください