怎么用CSS3實現會發光的按鈕

本篇內容介紹了“怎么用CSS3實現會發光的按鈕”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

今天我們要利用CSS3來完成一款很酷的發光分享按鈕，并將整理的源代碼分享給大家，如果需要，你也可以將此CSS3分享按鈕應用到自己的項目中去，也歡迎將此文分享給你的好友。下面先來看一看效果圖

下面我們來分析一下實現的過程以及核心的源碼，代碼主要由HTML和CSS組成，應該說比較簡單。
HTML代碼：

代碼如下:

<div>
 <div>
   <ul>
     <li><a href="#"><i></i></a></li>
     <li><a href="#"><i></i></a></li>
     <li><a href="#"><i></i></a></li>
     <li><a href="#"><i></i></a></li>
     <li><a href="#"><i></i></a></li>
   </ul>
 </div>
</div>

以上的HTML結構利用了一個ul列表將5個分享按鈕橫向排列起來，結構非常清晰。
CSS代碼：
首先我們需要將ul中的項橫向排列，這就需要實現以下的CSS代碼：

代碼如下:

ul {
 list-style: none;
 float: left;
}
ul li {
 position: relative;
 width: 100px; height: 100px;
 float: left;
 background: #474644;
 border-radius: 15px;
 border-bottom: 5px solid #33322f;
 border-left: 3px solid #000000;
 box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
 -webkit-transition: -webkit-box-shadow .15s ease-in-out;
}

然后是實現分享按鈕中的圖標，這里我們引用了一個外部的字體庫font-awesome.css，這個CSS文件中定義了很多圖標字體，所以我們只需在頁面上引用這個文件就可以了。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
在這個CSS文件中我們可以看出，如果要添加facebook的圖標，只要這樣寫就可以了：

代碼如下:

.fa-facebook:before {
 content: "\f09a";
}

最后我們要實現的是鼠標滑過的發光效果，其實說白了，就是改變文字的投影和內部圖標顏色漸變動畫，漸變動畫如下代碼所示：

代碼如下:

ul li:hover i{
 -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
 transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
 border-bottom: 1px solid #33322f;
 top: 5px;
 border-left: 1px solid #000000;
 margin-right: 2px;
 box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
 z-index: -1;
}

文字投影效果：

代碼如下:

.facebook:hover i{
 text-shadow:
   0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
   0 0 1em #3f5598;
 color: #3f5598;
}

“怎么用CSS3實現會發光的按鈕”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！