CSS陰影光暈按鈕或發光圖片

發表留言 人氣: 981°c

CSS做出有陰影及光暈(發光)的按鈕(Button),是一個很特別的光效果,能夠為網站增添一點美感之餘,美化Tag(標籤/關鍵字)連結,提高用戶或訪客的辨識度;又或是使用鼠標點擊圖片的時候,周圍散發出燦爛的光影,如同一張會發光相片特效。

陰影+圓角+光暈按鈕
<style type="text/css">
.tags a{
background: #F0F0F0;
border-radius: 2px;
color: #000;
display: inline-block;
font-size: 13px;
height: 25px;
line-height: 25px;
margin-right: 10px;
text-align: center;
width: 60px;
border: 1px solid #D8D8D8;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
transition: 0.2s ease-in-out;
}
.tags a:hover{
background: #f0f0f0;
color: #2a5abe;
text-decoration: underline;
border: 1px solid #a8cffe;
box-shadow: 0px 0px 7px rgba(42, 90, 190, 0.5);
}
</style>
<span class="tags"><a href="">月光部落</a></span> <span class="tags"><a href="">線上工具</a></span> <span class="tags"><a href="">更多 »</a></span>

點擊或鼠標放在圖片上發光
<style type="text/css">
.arrow {
width: 76px;
height: 56px;
display: block;
}
.arrow:hover {
box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
}
</style>
<a href="" class="arrow"><img src="圖片地址" /></a>

代碼測試︰www.ifreesite.com/runcode.htm

顏色(色碼表)︰www.ifreesite.com/color

相關文章:
CSS發光文字(光暈)特效

標籤: | 短網址