Tạo button đẹp mắt đơn giản với CSS3

Trong bài viết này, tôi sẽ trình bày từng bước để tạo ra một button sử dụng CSS3. Button có thể được tạo ra từ thẻ button, input type=button hoặc thẻ a (tất nhiên dùng các thẻ khác cũng được).

Tôi sẽ từng bước tạo ra một button như sau: button

Bước 1: Tạo màu nền, đường viền, bo góc

.btn{
    background-color: #21759B;
    background-image: linear-gradient(to bottom, #2A95C5, #21759B);
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    border-color: #21759B #21759B #1E6A8D;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px 3px 3px 3px;
}

 

<a class="btn">Go to TEK</a>

Go to TEK

Màu nền background-color được đổ màu xanh trơn #21759B, thực tế không để làm gì trong css3 nhưng giúp cho tương thích với các browser không hỗ trợ ảnh nền dạng màu gradient định nghĩa ngay dưới.
Màu nền được đổ gradient (dải màu biến đổi liên tục) từ #2A95C5 (xanh nhạt hơn) đến #21759B (xanh đậm hơn một chút).
Đường viền được vẽ bởi 3 màu: trên cùng màu xanh nhạt nhất (bằng luôn màu nền), 2 cạnh đậm hơn và viền dưới đậm nhất, 4 góc được bo 3px

Bước 2: Tạo khoảng cách bằng padding, margin

.btn{
    background-color: #21759B;
    background-image: linear-gradient(to bottom, #2A95C5, #21759B);
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    border-color: #21759B #21759B #1E6A8D #21759B;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px 3px 3px 3px;

    display: inline-block;
    padding: 4px 15px 7px 15px;
    margin: 2px 4px;
}

Go to TEK

padding, margin hợp lý để tạo khoảng cách giữa chữ bên trong button và viền button và giữa button và các thành phần bên ngoài. Lưu ý: cần để display: inline-block để padding, margin có hiệu lực với các thẻ inline như <a>.

Bước 3: Style cho chữ: màu, bóng, trang trí…

.btn{
    background-color: #21759B;
    background-image: linear-gradient(to bottom, #2A95C5, #21759B);
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    border-color: #21759B #21759B #1E6A8D #21759B;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    padding: 4px 15px 7px 15px;
    margin: 2px 4px;

    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

Go to TEK

Để màu chữ cho phù hợp với màu nền (trắng chẳng hạn)
Để bóng chữ màu đen nhưng opacity 10%, đổ bóng xuống phía dưới
Không để gạch chân (cho trường hợp thẻ a)

Bước 4: Tạo hiệu ứng khi hover, click

.btn{
    background-color: #21759B;
    background-image: linear-gradient(to bottom, #2A95C5, #21759B);
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    border-color: #21759B #21759B #1E6A8D #21759B;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    padding: 4px 15px 7px 15px;
    margin: 2px 4px;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover, .btn:focus {
    background-color: #278AB7;
    background-image: linear-gradient(to bottom,#2E9FD2,#21759B);
    border-color: #1B607F;
    box-shadow: 0 1px 0 rgba(120,200,230,0.6) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
}

Go to TEK

Khi hover, click:
Đổ màu nền phía trên nhạt hơn
Vẽ đường viền nhạt hơn
Viền bóng phía trên đậm hơn một chút
Bóng chữ đổ lên trên

Như vậy ta đã được một button tương đối hoàn chỉnh và đẹp mắt rồi.

Hỗ trợ

Cách viết css trên được hỗ trợ trên tất cả các trình duyệt hỗ trợ CSS3. Bạn có thể thêm các tiền tố tương ứng với từng browser để tăng mức độ hỗ trợ trên các browser chuyên biệt (-webkit-, -moz-, -o-, -ms-). Ví dụ như:
Với background-image:

background-image:-webkit-gradient(linear,left top,left bottom,from(#2e9fd2),to(#21759b));
background-image:-webkit-linear-gradient(top,#2e9fd2,#21759b);
background-image:-moz-linear-gradient(top,#2e9fd2,#21759b);
background-image:-ms-linear-gradient(top,#2e9fd2,#21759b);
background-image:-o-linear-gradient(top,#2e9fd2,#21759b);

Hi vọng với bài viết này sẽ giúp bạn trong quá trình tạo và tùy chỉnh style cho trang web