CSS發光按鈕是現代網頁設計的常用元素之一，可以為網頁增添動感和現代化感。下面是一些常見的CSS發光按鈕樣式。

/* 普通發光按鈕 */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 30px;
color: #fff;
background: #ff9500;
box-shadow: 0px 0px 30px 0px rgba(255,149,0,0.66);
transition: all 0.4s ease-in-out;
}
.btn:hover {
background: #ffad33;
box-shadow: 0px 0px 50px 0px rgba(255,149,0,0.8);
}
/* 鏤空發光按鈕 */
.btn-outline {
display: inline-block;
padding: 10px 20px;
border: 2px solid #ff9500;
border-radius: 30px;
color: #ff9500;
background: transparent;
box-shadow: 0px 0px 30px 0px rgba(255,149,0,0.66);
transition: all 0.4s ease-in-out;
}
.btn-outline:hover {
color: white;
background: #ff9500;
box-shadow: 0px 0px 50px 0px rgba(255,149,0,0.8);
}
/* 圓形發光按鈕 */
.btn-circle {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
color: #fff;
background: #ff9500;
line-height: 60px;
text-align: center;
box-shadow: 0px 0px 30px 0px rgba(255,149,0,0.66);
transition: all 0.4s ease-in-out;
}
.btn-circle:hover {
background: #ffad33;
box-shadow: 0px 0px 50px 0px rgba(255,149,0,0.8);
}
/* 立方體發光按鈕 */
.btn-cube {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 10px;
color: #fff;
background: #ff9500;
position: relative;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.btn-cube:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.05);
}
.btn-cube:hover {
background: #ffad33;
box-shadow: 0px 0px 50px 0px rgba(255,149,0,0.8);
}
.btn-cube:hover:before {
animation: animate-cube 1s linear infinite;
}
@keyframes animate-cube {
from {
transform: translate(-50%, -50%) rotate(45deg);
}
to {
transform: translate(-50%, -50%) rotate(405deg);
}
}