少しでも表示速度を速くすることを念頭においていることで、ほとんど?のボタンなどのパーツはできるだけ画像を使わないデザインになっているので、今回はCSS3で簡単にマウスオーバーで押した風なボタンを作る方法を紹介。
この記事はこのような仕事をしている人向けに書いています
- Webディレクター
- Webデザイナー
- コーダー、マークアップエンジニア
サンプルボタン
[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]
実装するのは結構簡単なので、用途に応じてカスタマイズしてもらえればと思います。
コメント