
マウスオーバーで矢印がくるっとスライドするボタン
2014年12月4日CSSテクニック
マウスカーソルをあてると文字の横に表示されていた矢印が下に捌け、上から別の矢印が定位置にアニメーションしてくるボタンです。
HTML
<div id="btn"><a href="javascript:void(0);">slide arrow button</a></div>
CSS
#btn { margin: 0 auto; text-align: center; } #btn a { overflow: hidden; display: inline-block; position: relative; background: #52d3ff; text-decoration: none; padding: 12px 18px 12px 30px; color: #ffffff; border-radius: 4px; border: 1px solid #ffffff; } #btn a:before, #btn a:after { position: absolute; content: "▼"; left: 10px; top: 50%; margin-top: -6px; font-size: 9px; transform: rotate(-90deg); transition: .2s ease-in-out; } #btn a:after { margin-top: -31px; } #btn a:hover:before { margin-top: 19px; } #btn a:hover:after { margin-top: -6px; }