使用html+css做一个炫酷的按钮

用HTML5+css3做一个炫酷按钮的demo

用到的工具 vscode

使用html+css做一个炫酷的按钮_第1张图片

新建一个HTML文件并链接css文件,创建a标签来放按钮。

添加body的样式

使用html+css做一个炫酷的按钮_第2张图片

添加a中按钮的样式

使用html+css做一个炫酷的按钮_第3张图片

设置动画并应用

使用html+css做一个炫酷的按钮_第4张图片

完善效果

使用html+css做一个炫酷的按钮_第5张图片

最后附上代码

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光按钮</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <a href="javascript:;">submit</a>
</body>

</html>

css

* {
     /*去除全局内外边距*/
    margin: 0;
    padding: 0;
}
body {
     
    /* 设置背景网页为黑色 */
    background-color: black;

}
a {
     
   /* 设置按钮大小 */
    width: 400px;
    height: 100px;
   
/* 使按钮居中 */
    left: 50%;
    top: 50%; 
    position: absolute;
    line-height: 100px;
    text-align: center;
/*由于absolute是以按钮的左上角来作为位置基准的,应该再向左上平移按钮自己的一半 */
    transform: translate(-50%, -50%);
    /* 去除文字装饰,使按钮字母大写 ,字体大小及颜色(可自行调节)*/
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
    color: #ffff;
    /* 按钮变成圆角 */
    border-radius: 50px;
    /* 按钮背景颜色及尺寸 */
    background-image:linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);
    background-size: 400%;
/* 将该层层级设为1 */
    z-index: 1;
}


@keyframes sun {
     
100%{
     
    background-position: -400% 0;
}
}
/* 添加背景移动动画(添加完成这一步即可看到流光) */
a:hover{
     
    animation: sun 8s infinite;
}


/* 最后添加外面的模糊光 ,这时流光动画会被这层模糊挡住*/
a::before {
     
content: "";
position: absolute;
left:-5px;
right:-5px;
top:-5px;
bottom:-5px;
background-image:linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);
background-size: 400%;
/* 添加高斯模糊为20px */
filter: blur(20px);
/* 将层级下调为-1 */
z-index: -1;
}


/* 给外面的模糊光也加上动画,就可以看到流光啦 */
a:hover::before{
     
    animation: sun 8s infinite;  
}

你可能感兴趣的:(css,html5,html,css3,前端)