hoverでフチの線が伸びるボタン

• 通常

• 通常

  ボタンリンク
  HTML<a href="" class="btn"><span>ボタンリンク</span></a> CSS.btn { display: inline-block; padding: .75em 3.75em; background: #ffc107; color: #333; text-decoration: none; text-align: center; position: relative; box-sizing: border-box;} .btn::before, .btn::after,.btn > span::before, .btn > span::after { display: block; position: absolute; background: #ff7e00; content: ""; transition: all linear .3s;} .btn::before, .btn::after { width: 1em; height: 3px;} .btn > span::before, .btn > span::after { width: 3px; height: 1em;} .btn::before, .btn > span::before { top: 0; left: 0;} .btn::after, .btn > span::after { bottom: 0; right: 0;} .btn:hover:before, .btn:hover:after { width: 100%;} .btn:hover > span::before, .btn:hover > span::after { height: 100%;}

一覧に戻る