css制作网页酷炫按钮

最新推荐文章于 2023-03-08 10:35:46 发布

feixs1

最新推荐文章于 2023-03-08 10:35:46 发布

阅读量536

点赞数 1

分类专栏：前端网页文章标签： css3 html5

本文链接：https://blog.csdn.net/feixs1/article/details/106531928

版权

前端网页专栏收录该内容

5 篇文章 1 订阅

订阅专栏

今天偶然看到一位大佬的文章，觉得很有意思就跟着实操了一遍，结果也挺让人高兴的，当然，独乐乐不如众乐乐，现在我就分享给大家哈！

css制作网页酷炫按钮

当然啦，源代码也会给大家的，一起学习一起进步！！！

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="2.css">
	<title>css按钮特效</title>
</head>
<body>
	<a href="#">Button</a>
	<a href="#">Button</a>
	<a href="#">Button</a>
</body>
</html>

css代码：

*{
	margin:0;
	padding: 0;
	font-family: '微软雅黑',sana-serif;
	box-sizing:border-box; 
}

body{
	display:flex;
	justify-content: center;
	align-items: center;
	background:#000;
	min-height: 100vh;
}
a{
	position: relative;
	padding: 10px 30px;
	margin:0 45px;
    color: #21ebff;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;/*定义仅为大写*/
    transition: 0.5s;/*样式0.5秒缓动*/
    overflow: hidden;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0003);
}

a:hover{
	background:#21ebff;
	color:#111;
	box-shadow: 0 0 50px #21ebff;/*依次为从原点向x轴长度、向y轴长度、阴影的模糊度、阴影颜色*/
	transition-delay: 0.5s;
}

a:nth-child(1){
	filter:hue-rotate(115deg);
}
a:nth-child(3){
	filter:hue-rotate(270deg);
}

a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-top: 2px solid #21ebff;
	border-left:2px solid #21ebff;
	transition:0.5s;
	transition-delay: 0.5s
}

a:hover::before{
	width:100%;
	height:100%;
	transition-delay: 0s;
}

a::after{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #21ebff;
	border-right: 2px solid #21ebff;
	transition:0.5s;
	transition-delay: 0.5s;
}
a:hover::after{
	width: 100%;
	height: 100%;
	transition-delay: 0s;
}

好啦，今天就先分享这么多，吃饭吃饭~~~
在这里插入图片描述

feixs1

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css制作网页酷炫按钮

今天偶然看到一位大佬的文章，觉得很有意思就跟着实操了一遍，结果也挺让人高兴的，当然，独乐乐不如众乐乐，现在我就分享给大家哈！ css制作网页酷炫按钮当然啦，源代码也会给大家的，一起学习一起进步！！！html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫