hoverで背景が左から右へ流れるボタン
通常
通常
ボタンリンク
HTML
ボタンリンク
CSS
.btn { display: inline-block; padding: .75em 2em; color: #fff; text-decoration: none; background: #000; transition: all ease .3s; position: relative; transition: all ease .3s; overflow: hidden;} .btn > span { position: relative; z-index: 2;} .btn::before { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0, 1); background: #E6B422; content: ""; transition: transform linear .3s; transform-origin: right top;} .btn:hover::before { transform: scale(1,1); transform-origin: left top;}
一覧に戻る