Tạo button với hiệu ứng hover đơn giản bằng CSS3

Tranh thủ một chút ít thời gian, mình sẽ chia sẻ cho các bạn một mẫu button rất đáng để các bạn sử dụng trên các trang blog hay web của mình. Nếu không thích thì các bạn cũng có thể học thêm được nhiều về CSS3 với những thuộc tính mà nó tạo hiệu ứng cho button này.

Xem Demo | Download

HTML

Các bạn chỉ cần khung chuẩn html cho button đơn giản như sau :

<button>Hover me !</button>

CSS

Và đây chính là trái tim của bài viết, các bạn chỉ cần copy đoạn css sau :

html,body{
  height:100%;
}
body{
  text-align:center;
}
body:before{
  content:';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  awidth:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  awidth:100%;
  transition:800ms ease all;
}

Không quá khó để các bạn hiểu rõ đoạn css trên phải không ? Mình tin rằng các bạn sẽ có thêm ý tưởng cho những mẫu thiết kế web sau này.

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

Chuyên Mục: Css

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