Underline Hover Effect với CSS3

Cập nhật: Lượt xem: 1492 [ Css ]

Tiếp tục mang đến cho các bạn những hiệu ứng hover bằng CSS3. Trong bài viết ngày hôm nay,  Laptrinhweb xin chia sẻ một đoạn css ngắn giúp các bạn tạo hiệu ứng underline đơn giản nhưng đẹp mắt, các bạn có thể áp dụng hiệu ứng này cho các menu trong trang web hay blog của các bạn.

Underline Hover Effect với CSS3

 

HTML

Để minh họa menu, chúng ta sẽ có khung chuẩn html như sau :

<ul>
  <li><a href="#">Lorem</a>
  <li><a href="#">Ipsum</a>
  <li><a href="#">Dolor sit</a>
  <li><a href="#">Amet</a></li>
</ul>

CSS

Sau đó, chúng ta sẽ định dạng hiệu ứng với đoạn css sau :

@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);
body {
  background-color: #f0f0f0;
  font-family: 'Ubuntu', sans-serif;
}
 
ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  margin-top: 10%;
}
ul li {
  display: inline-block;
  margin: 0 20px;
}
 
a {
  font-size: 20px;
  color: #584E4A;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
}
a:before, a:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #F37272;
}
a:before {
  opacity: 0;
  transform: translateY(-8px);
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
a:after {
  opacity: 0;
  transform: translateY(4px);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:before, a:hover:after, a:focus:before, a:focus:after {
  opacity: 1;
  transform: translateY(0);
}
a:hover:before, a:focus:before {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:after, a:focus:after {
  transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

Chúc các bạn thành công !