【コピペで楽々】はてなブログのリンクを目立たせる、ボタン風のCSSカスタマイズ

リンクを目立たせるCSSカスタマイズを作りました。カラーは自由に変更出来ます。

完成予想図

リンク部分をボタン風にすることで、強調します。

共通HTML

<a>要素を挟んでいる<p>要素にclass「article-btn」を追加してください。

<p class="article-btn"><a href="#">文字</a></p>

デザイン一覧

シンプルな影付きボタン

.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:4px;
 font-weight:bold;
 color:white;/* ボタンの文字色 */
 background-color:#e34c26;/* ボタンの背景色 */
 box-shadow:0 2px #541a0b;/* ボタンの影の色 */
 text-align:center;
}

シンプルな影なしボタン

.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:10px;
 font-weight:bold;
 color:white;/* ボタンの文字色 */
 background-color:#e34c26;/* ボタンの背景色 */
 text-align:center;
}

 マウスオーバーで拡大するリンクボタン

.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:4px;
 font-weight:bold;
 color:white;/* ボタンの文字色 */
 background-color:#e34c26;/* ボタンの背景色 */
 box-shadow:0 2px #541a0b;/* ボタンの影の色 */
 transition:transform 0.3s;
 text-align:center;
}
.article-btn a:hover{
    transform:scale(1.1);
}

マウスオーバーで色が反転するボタン

.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:4px;
 font-weight:bold;
 color:white;/* ボタンの文字色 */
 background-color:#e34c26;/* ボタンの背景色 */
 border:2px solid #e34c26;/* ボタン枠の背景色 */
 transition:all 0.5s;
 text-align:center;
}
.article-btn a:hover{
 color:#e34c26;
 border:2px solid #e34c26;/* マウスオーバー時のボタンの背景色 */
 background-color:white;/* マウスオーバー時のボタンの背景色 */
}

マウスオーバーで色が変わるボタン2

.article-btn a{
 display:block;
 text-decoration:none;
 padding:7px 10px;
 border-radius:4px;
 font-weight:bold;
 color:#e34c26;/* ボタンの文字色 */
 background-color:white;/* ボタンの背景色 */
 border:2px solid #e34c26;/* ボタン枠の背景色 */
 transition:all 0.5s;
 text-align:center;
}
.article-btn a:hover{
 color:white;/* マウスオーバー時のボタンの文字色 */
 background-color:#e34c26;/* マウスオーバー時のボタンの背景色 */
 border:2px solid #e34c26;/* マウスオーバー時のボタン枠の背景色 */
}