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> <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ữ.

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*