こんにちは、Ogawa(@hamidasiblog)です。
このたびサイトデザインを一新しました。
その際に行ったカスタマイズを備忘録として記録します。
例
html
<div class="button"> <div class="button-inner"><a href="“URL”">タイトル</a></div> </div>
css
/* button */ .button { width: 300px; height: 46px; margin-top: 0; margin-bottom: 20px; margin-left: auto; margin-right: auto; } .button-inner a { position: relative; display: table-cell; width: 300px; height: 46px; border-radius: 4px; background-color: #FF9A00; font-size: 20px; font-weight: bold; color: #fff; text-align: center; vertical-align: middle; box-shadow: 0 2px 4px rgba(0,0,0,.4); text-decoration: none; transition: all .6s; } .button-inner a:hover { top: 3px; box-shadow: none; transition: all .6s; }