「CSSだけで作るボタン」作成メモ

プロフェッショナルな方の記事を参考に、CSSのみで作ったボタンのHTML・CSSコードをメモしておきます。

スポンサーリンク
 

参考記事)

ボタンのコードはほぼ、サルワカさんの記事そのままで、マウスオーバー時(hover)の効果をCSSに加筆。

ボタンサンプル

ボタン

コード

HTML

<a class=”square_btn” href=”#sample”>ボタン</a>

CSS

/*CSSボタン*/
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #FF7782;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
font-weight:bold;
}
.square_btn:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.square_btn:hover {/*マウスオーバーしたとき*/
text-decoration: none;
color: #FFF;
background: #e27272/*ボタン色*/
}

ボタンのサイズは文字サイズを変えれば、それと連動して変わります。

スポンサーリンク