高級感のあるボタン
- RESULT
- HTML
- CSS
- コピー
<p class="msr_btn16"> <a href="#">button01</a> </p>
- コピー
.msr_btn16 a{ width: 400px; padding:15px; color:#ffffff; font-size: 15px; line-height: 120%; text-align: center; text-decoration: none; border:1px solid #7a5829; -webkit-box-shadow:0px 0px 0px 1px #fff inset, 0px 10px 30px -10px rgba(0,0,0,0.2); -moz-box-shadow:0px 0px 0px 1px #fff inset, 0px 10px 30px -10px rgba(0,0,0,0.2); box-shadow:0px 0px 0px 1px #fff inset, 0px 10px 30px -10px rgba(0,0,0,0.2); background: #ab864e; background: -moz-linear-gradient(top, #ab864e 1%, #7a5829 100%); background: -webkit-linear-gradient(top, #ab864e 1%,#7a5829 100%); background: linear-gradient(to bottom, #ab864e 1%,#7a5829 100%); display: block; position:relative; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; } .msr_btn16 a:before { content: ""; width: 10px; height: 5px; margin:0 0 0 -5px; border: 5px solid transparent; border-top: 7px solid #fff; box-sizing: border-box; position: absolute; top: 0; left: 50%; } .msr_btn16 a:hover { opacity:.8; }
検証済みブラウザ
- Edge
- FF
- chrome
- Safari