CSS3でマウスオーバーで押した風なボタンを作る方法

少しでも表示速度を速くすることを念頭においていることで、ほとんど？のボタンなどのパーツはできるだけ画像を使わないデザインになっているので、今回はCSS3で簡単にマウスオーバーで押した風なボタンを作る方法を紹介。

この記事はこのような仕事をしている人向けに書いています

• Webディレクター
• Webデザイナー
• コーダー、マークアップエンジニア

サンプルボタン

Button

[HTML]

[code lang=”js”]
<p class="button">
<a href="#">Button</a>
</p>

[/code]

[CSS]

[code lang=”js”]
.button {
width : 350px;
text-align: center;
}

.button a{
text-decoration : none;
display : block;
color : #fff;
border-radius: 4px;
background-color: #ff6000;
box-shadow: 0px 4px 0 rgba(0, 0, 0, .7);
padding : 8px;
transition: 0.2s all ease 0s;
}

.button a:hover{
background-color: #ffb589;
box-shadow: none;
transform: translate3d(0, 3px, 0);
color: #2d2d2d;
}
[/code]

実装するのは結構簡単なので、用途に応じてカスタマイズしてもらえればと思います。