Tạo button hiệu ứng hover với CSS3

Hôm nay, iZdesigner sẽ chia sẻ tới 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.



Đầu tiên, các bạn chỉ cần khung chuẩn html cho button đơn giản như sau :

1	<button>Hover by iZdesigner</button>

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 :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

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 ? iZdesigner 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.

Mê Công - iZdesigner.com