CSS按鈕的光源動畫效果可以提升網頁的美觀性和交互性。下面我們來學習一下如何實現這個效果。

CSS樣式代碼：
.button {
padding: 15px 25px;
background-color: #00bcd4;
color: #fff;
border: none;
border-radius: 5px;
position: relative;
overflow: hidden;
transition: all .5s ease;
box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 10px -10px;
}
.button:hover {
background-color: #ff9800;
color: #fff;
}
.button:before {
content: '';
position: absolute;
top: -120%;
left: -120%;
width: 350%;
height: 350%;
background-color: rgba(255, 255, 255, .2);
transform: rotate(45deg);
transition: all .5s ease;
}
.button:hover:before {
top: -30%;
left: -30%;
}

首先，我們定義了一個class為button的按鈕樣式，包括了padding、背景色、字體顏色、邊框和圓角等基本樣式。

為了實現光源動畫效果，我們需要在按鈕上使用偽元素:before，并設置絕對定位和寬高為350%。同時，將背景色設置為半透明的白色。

在:hover偽類中，我們設置:before偽元素的top和left屬性，使其在鼠標懸停時從左上角開始擴散光源。這樣就可以實現一個充滿動感的光源動畫效果。

以上就是CSS按鈕光源動畫效果的實現方法，我們可以將它應用到網頁開發中，提升用戶體驗和頁面交互性。