Tạo liên kết button bắt mắt với CSS3

Có thể nhiều bạn sẽ thắc mắc liên kết button là j ? thật ra chỉ là một liên kết được custom có hình dáng như 1 button thông thường mà thôi.
Chúng ta vẫn sử dụng tag <a></a> cho một liên kết trong website, còn nói đến button thì chúng ta sẽ nghĩ tới tag <button> hay <input type="submit" /> hay <input type="button"/>. Còn tag <a> thường được sử dụng cho các liên kết đến các site hoặc các bài viết liên quan trên website.

Nhưng đôi khi chúng ta lại cần những liên kết với những đoạn text ngắn chẳng hạn như : "link","ok","cancel" ... để thực hiện những đoạn script nhỏ mà chúng ta mong muốn.

Nào chúng ta hãt bắt đầu :
như đã nói trong hướng dẫn này mình sẽ dùng các thẻ <a> để tạo ra những button.

<a>Button</a>

// Tiếp theo chúng ta sẽ tuỳ chỉnh css cho thẻ <a> đó như sau:

a{
font-weight: bold;
        color: #fff;
display: block;
padding: 5px 10px;
background-color: #4a8bf5;
float: left;
text-decoration: none;
border: 1px solid #4688f2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
opacity: 0.9;
}

Khi đó chúng ta sẽ được như thế này:
Button


Tiếp theo chúng ta cần tạo một số hiệu ứng khi rê chuột vào button và khi click trên button đó.
Để thực hiện được hiệu ứng đó mình sẽ tận dụng các cú pháp của Pseudo-class làm điều đó.

// tạo thêm các border top, left, right cho button khi button được click
a:active{
color: #e9e9e9 ;
background-color: #4a8bf5;
border-top: 2px solid #1a6cef !important;
border-left: 1px solid #1a6cef !important;
border-right: 1px solid #1a6cef !important;
padding: 5px 10px 4px 10px;
}


a:hover{
opacity: 1;
border: 1px solid #3c61d6;
}

Và đây là kết quả của chúng ta:
Button


bạn có thể thấy được sự khác biệt của 2 button.

Hy vọng các bạn thích bài viết này.
Chúc mọi người một ngày vui vẻ :)