話不多，先上效果：

簡介：

用基礎css做一個有一點炫酷的流光按鈕，不止按鈕，只要是盒子就行。

具體步驟：

1.先定義一個盒子當做按鈕，如我就用a標簽：

button

2.先給a標簽寫基礎的樣式，比如長寬等等…：

.guang{

position: relative;

display: inline-block;

width: 220px;

height: 80px;

color: rgb(255, 255, 255);

line-height: 80px;

font-size: 35px;

font-family: sans-serif;

text-decoration: none;

text-transform: uppercase;

text-align: center;

border-radius: 30px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

z-index: 1;

text-shadow: 0 0 5px white,

0 0 5px white;

}

注意：其中一些屬性用處：

text-transform: uppercase; 全部換成大寫字母。

background: linear-gradient(…); 線性顏色漸變，可以改成自己要的顏色。

text-shadow: 0 0 5px white,

0 0 5px white;

寫兩行是為了讓字體更亮。

3.鼠標經過盒子產生流光的動畫：

.guang:hover{

animation: move 5s linear alternate infinite;

}

@keyframes move{

0%{

background-position: 0%;

}

100%{

background-position: 100%;

}

}

4.定義盒子周圍的光暈陰影：

.guang::before{

content: '';

position: absolute;

top: -10px;

left: -10px;

width: 240px;

height: 100px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

opacity: 0;

z-index: -1;

border-radius: 45px;

transition: 0.6s;

}

.guang:hover::before{

filter: blur(15px);

opacity: 1;

animation: move 8s linear alternate infinite;

}

注意：其中一些屬性用處：

filter: blur 濾鏡，就是讓其模糊

完整代碼：

Document

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: black;

}

.guang{

position: relative;

display: inline-block;

width: 220px;

height: 80px;

color: rgb(255, 255, 255);

line-height: 80px;

font-size: 35px;

font-family: sans-serif;

text-decoration: none;

text-transform: uppercase;

text-align: center;

border-radius: 30px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

z-index: 1;

text-shadow: 0 0 5px white,

0 0 5px white;

}

.guang:hover{

animation: move 5s linear alternate infinite;

}

@keyframes move{

0%{

background-position: 0%;

}

100%{

background-position: 100%;

}

}

.guang::before{

content: '';

position: absolute;

top: -10px;

left: -10px;

width: 240px;

height: 100px;

background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));

background-size: 400%;

opacity: 0;

z-index: -1;

border-radius: 45px;

transition: 0.6s;

}

.guang:hover::before{

filter: blur(15px);

opacity: 1;

animation: move 8s linear alternate infinite;

}

button

總結

哈哈~

總結

以上是生活随笔為你收集整理的HTML炫彩按钮,炫彩流光按钮 html+css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。