Tạo button với hiệu ứng hover 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.

button, css3, css3 tips, thu thuat css, css co ban

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;

  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.

 

 HỖ TRỢ TRỰC TUYẾN