スマホへこむボタンCSS

2015年5月27日更新 view: 9 view

さわると凹むCSSボタン

ユーザビリティ的にもさわったらへこんだら嬉しいですよね。
そんな時、CSSだけで実現しちゃう伊東家の裏ワザをおしえちゃるがね!

まずはCSS

<style>
.hekomu {
width: 300px;
font-size: 19px;
font-weight: bold;
text-align: center;
display: inline-block;
}
.hekomu a {
margin: auto;
padding: 11px 10px 8px;
display: block;
background: #03b4e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 6px 0 #015972,0 12px 0 rgba(0,0,0,0.2);
-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
color: #fff;
text-decoration: none;
}
.hekomu a:hover {
box-shadow: 0 3px 0 #015972,0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(3px);
transform: translateY(3px);
background: #03b4e3;
}
</style>

htmlタグは

スポンサードリンク
<div class="hekomu">
<a href="/%E3%83%AC%E3%83%B3%E3%82%BF%E3%83%AB%E5%BD%BC%E6%B0%8F%E5%8B%9F%E9%9B%86%E3%80%81%E6%B1%82%E4%BA%BA%E3%80%81%E3%82%A2%E3%83%AB%E3%83%90%E3%82%A4%E3%83%88%E7%99%BB%E9%8C%B2/">レンタル彼氏になりたい<br>登録3分</a>
</div>
スポンサードリンク

関連記事

関連カテゴリ