Tạo Button Với Hiệu Ứng Hover Đơn Giản Bằng CSS3

Xin Chào, blog 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.

Demo

HTML

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

<button>Vũ Tiến Anh Blog !</button>

CSS

Các bạn chỉ cần copy đoạn css sau :

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;

  width:0;

  background: #1AAB8A;

  transition:400ms ease all;

}

button:after{

  right:inherit;

  top:inherit;

  left:0;

  bottom:0;

}

button:hover:before,button:hover:after{

  width: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 !

Theo Chiase78.Blogspot.Com