Đăng nhập

Cách tạo hiệu ứng ánh sáng cho button với CSS

  • 05/02/2015 - 10:21 AM
  • 2165 Views

Bài viết này chia sẽ đến các bạn sử dụng pseduo-class và những kỹ thuật box-shadow để tạo hiệu ứng ánh sáng cho phần tử button cực đẹp.

cach-tao-hieu-ung-anh-sang-cho-button-voi-css

Cách tạo hiệu ứng ánh sáng cho button với CSS

Demo | Download

Hướng dẫn này áp dụng hiệu ứng cho thanh menu, ta có mã html cơ bản sau:

Mã HTML

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

Mã CSS

Custom thanh menu một chút với mã CSS sau:

body{
     text-align:center;
     font-family:helvetica,arial,sans-serif;
     font-size:12px;
     background-color:#2d2d2d;
}
.navigation{
     background-color:#3f3f3f;
     display:inline-block;
     margin-top:150px;
     border-radius:5px;
     box-shadow:0 0px 5px rgba(0,0,0,0.4);
}
.navigation li{
     display:inline;
}
.navigation a{
     display:block;
     float:left;
     font-size:12px;
     letter-spacing:0.5px;
     font-weight:bold;
     text-shadow:0 1px 0 rgba(1,1,1,0.6);
     padding:12px 25px;
     color:#b3b3b3;
     border-left:1px solid #4c4c4c;
     border-right:1px solid #323232;
}
.navigation li:first-child a{
     border-left:none;
     border-radius:3px 0 0 3px;
}
.navigation li:last-child a{
     border-right:none;
     border-radius:0 3px 3px 0;
}

Với mã CSS trên ta được thanh menu như hình dưới:

cach-tao-hieu-ung-anh-sang-cho-button-voi-css-2

Cách tạo hiệu ứng ánh sáng cho button với CSS

Sau đây ta sẽ sử dụng pseudo-class của thẻ a và áp dụng cho nó thuộc tính box-shadow để tạo hiệu ứng ánh sáng khi hover giống hình dưới:

cach-tao-hieu-ung-anh-sang-cho-button-voi-css-3

Cách tạo hiệu ứng ánh sáng cho button với CSS

Trước tiên thêm cho <thẻ a> một vài thuộc tính quan trọng sau:

.navigation a{
 /*---code trước---*/
     position:relative;
     overflow:hidden;
     z-index:1;
}

Tiếp theo là đến pseduo-class của thẻ a khi hover:

.navigation a:hover:after,.navigation a:hover:before{
     content:"";
     position:absolute;
     top:100%;
     left:50%;
     margin-left:-10px;
     width:20px;
     height:20px;
     background-color:rgba(255,255,255,0.3);
     box-shadow:0 0 50px rgba(255,255,255,0.3),
                0 0 40px rgba(255,255,255,0.3),
                0 0 30px rgba(255,255,255,0.3),
                0 0 20px rgba(255,255,255,0.3);
     z-index:-1;
}

Ta sử dụng thuộc tính box-shadow với một loạt tham số để tạo hiệu ứng ánh sáng, đồng thời các bạn cũng chú ý một số thuộc tính như left, top, width, height… của nó. Còn mục đích khi ta cho thẻ a thuộc tính overfow:hidden để cho khi hover vào thì pseduo-class của nó không bi tràn ra ngoài, mặt khác ta cũng set cho thẻ a z-index:1 và pseduo-class của nó với z-index:-1 để hiệu ứng ánh sáng này không nằm đè lên chữ.