シャドウがかわいい角丸ボタン
- RESULT
- HTML
- CSS
- コピー
<p class="msr_btn13"> <a href="#">button01</a> </p>
- コピー
.msr_btn13{ height:53px; padding-top:1px; } .msr_btn13 a{ width: 180px; padding:15px; color:#ffffff; font-size: 15px; line-height: 120%; text-align: center; text-decoration: none; background: #1B73BA; display: block; position:relative; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2); -moz-box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2); box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .msr_btn13 a:hover{ margin:4px 0 0 4px ; -webkit-box-shadow:0 0 0px 0px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0px 0px rgba(0,0,0,0.2); box-shadow:0 0 0px 0px rgba(0,0,0,0.2); }
検証済みブラウザ
- Edge
- FF
- chrome
- Safari