button hover underline animation only css

button에 hover시 텍스트 중간에서부터 언더라인이 scale되는 효과.

 

See the Pen button hover css by publisher.kim (@publisherkim) on CodePen.

 

html

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

<div class="btns">
  <a href="#" class="btn"><i class="xi-home-o"></i> LINK1</a>
  <a href="#" class="btn"><i class="xi-pen"></i> LINK2</a>
  <a href="#" class="btn"><i class="xi-message-o"></i> LINK3</a>
  <a href="#" class="btn"><i class="xi-calendar-check"></i> LINK4</a>
</div>

 

css

.btns{text-align:center; padding:50px 0;}
.btn{display:inline-block; color:#000; font-size:17px; margin:0 20px; position:relative;}
.btn::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; transform: scaleX(0); transition-property: transform; transition-duration: 250ms; transition-timing-function: ease-in-out;}
.btn:hover:after {transform: scaleX(1);}