hoverで背景が左から右へ流れるボタン

• 通常

• 通常

  ボタンリンク
  HTML<a href="" class="btn"><span>ボタンリンク</span></a> 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;}

一覧に戻る