Underline Hover Effect với CSS3

16/01/2015

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, mình 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

Xem Demo | Download 

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(https://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;
}

Nếu các bạn có thắc mắc gì với đoạn css bên trên thì đừng ngần ngại để lại lời nhắn dưới dạng comment nhé, mình sẽ giúp các bạn hiểu rõ và sử dụng nó hiệu quả nhất.

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

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • dung nguyen

    rất hay, cảm ơn bạn