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

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

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

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

サンプルボタン

Button

[HTML]

<p class="button">
  <a href="#">Button</a>
</p>

[CSS]

.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;
}

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