Tạo Button với CSS cho blogger - 101 hiệu ứng CSS3

Vẫn theo tuần tự các bước truyền thống HTML -> CSS. Chúng ta bắt đầu với phần HTML …

Code HTML

Tạo một văn bản .html đơn giản với nội dung như sau:

<html>

    <head>

    <style>

        /* Ta sẽ bỏ CSS vào đây */

    </style>

    </head>

    <body>

        <a class="awesome">Button với CSS3 &raquo;</a>

    </body>

</html>

Trong code html ở trên có đoạn thẻ style, code css ở dưới đây bạn hãy đặt vào giữa cặp thẻ <style></style>.

Code CSS

Đoạn code sau sẽ giúp style lại liên kết và button cho đẹp mắt. Trong code css mình có dùng file hình nền tên là alert-overly.png nhiệm vụ của file này làm thêm đổ bóng cho đẹp thêm tí. Tải file này tại link dưới đây:

File hình alert-overlay.png

http://www.mediafire.com/?ih9j11cqc775wkw

Và đây là code:

.awesome, .awesome:visited {

    background: #222 url(alert-overlay.png) repeat-x;

    display: inline-block;

    padding: 5px 10px 6px;

    color: #fff;

    text-decoration: none;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

    border-left: 0px none;

    border-right: 0px none;

    border-top: 0px none;

    border-bottom: 1px solid rgba(0,0,0,0.25);

    position: relative;

    cursor: pointer;

}

.awesome:hover  { background-color: #111; color: #fff; }

.awesome:active { top: 1px; }

:hover và :active là 2 sự kiện để thay đổi style cho button, :hover là khi mà người dùng rê chuột vào và :active là khi liên kết được bấm. Bạn cứ copy hết đoạn css trên dán vào html theo vị trí mà mình đã nói từ trước.

Từ css này chúng ta có thể chế ra nhiều hiệu ứng khác nhau cho button. Cụ thể bạn xem demo sẽ thấy một số hiệu ứng biến thể cho button đã được mình dựng sẵn. Nếu lười thì bạn có thể tải toàn bộ source code về máy để từ từ nghiên cứu toàn bộ các hiệu ứng.

Xem demo Tải source

Nguồn: In4mau.blogspot.com