html炫光字体代码,炫光流彩特效按钮.html

炫光流彩特效按钮

body{

margin: 0;

padding: 0;

background: #000;

}

a{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 60px;

text-align: center;

line-height: 60px;

color: #fff;

font-size: 24px;

text-transform: uppercase;

text-decoration: none;

font-family: sans-serif;

background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

background-size: 400%;

border-radius: 30px;

z-index: 1;

}

a:hover{

animation: animate 8s linear infinite;

}

@keyframes animate{

0%{

background-position: 0%;

}

100%{

background-position: 400%;

}

}

a:before{

content: '';

position: absolute;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

z-index: -1;

background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

background-size: 400%;

border-radius: 40px;

opacity: 0;

}

a:hover:before{

filter: blur(20px);

opacity: 1;

animation: animate 8s linear infinite;

}

button

一键复制

编辑

Web IDE

原始数据

按行查看

历史