Underline Hover Effect với CSS3

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.

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: Css

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