Result
css
a {/*ボタン装飾。あとで疑似要素を重ねるのでz-indexを設定しておく*/ position: relative; border: 6px solid #232323; z-index: 2; padding: 12px 22px; margin: 0 10px; box-sizing: border-box; font-size: 26px; font-weight: 600; text-transform: uppercase; text-decoration: none; color: #232323;} a:hover:before{/*ホバーで元の位置に戻す*/ top: 0; left: 0; width: 102%; height: 100%;} a:active:before{ top: -10px; left: 18px; width: 102%; height: 100%;} a:before {/*背景を疑似要素で作成し、ずらす*/ content: ""; position: absolute; z-index: -1; top: 12px; left: -14px; width: calc(100% + 6px); height: calc(100% + 6px); background-color: #f9d159; transition: all 0.3s ease;} |
html
<div class="wrapper"> <div class="row"> <a href="#" class="btn-yellow">Hello</a> <a href="#" class="btn-red">Hallo</a> </div></div> |
via
Just a moment...
codepen.io
