button 动画 border

最新推荐文章于 2022-07-01 14:54:04 发布

小黄鸭htt

最新推荐文章于 2022-07-01 14:54:04 发布

阅读量127

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_41141811/article/details/118100755

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button{
				border: 0;
				background: transparent;
				
				display: inline-block;
				height: 35px;
				margin: 8px;
				line-height: 35px;
				padding: 0 30px;
				font-size: 15px;
				position: relative;
				border-radius: 3px;
				box-sizing: content-box;
			}
			/* 默认样式 */
			.btn-border{
				background: transparent;
				border: 1px solid #d0d0d0;
				color: #b8b8b8;
			}
			.btn-border::before{
				content: '';
				border-style: solid;
				position: absolute;
				z-index: 5;
				border-radius: 3px;
			}
			.btn-border::after{
				content: '';
				border-style: solid;
				position: absolute;
				z-index: 5;
				border-radius: 3px;
			}
			.btn-border::before{
				width: 0;
				height: 100%;
				border-width: 1px 0 1px 0;
				top: -1px;
				left: 0;
				transition-delay: 0.05s;
			}
			.btn-border::after{
				width: 100%;
				height: 0;
				border-width: 0 1px 0 1px;
				top: 0;
				left: -1px;
				transition-delay: 0.05s;
			}
			.btn-border:hover::before{
				width: 100%;
				border-color: #8A2BE2;
			}
			.btn-border:hover::after{
				height: 100%;
				border-color: #8A2BE2;
			}
			.btn-border::before,.btn-border::after{
				transition: all 0.5s;
			}
			.btn-border:hover{
				color: #8A2BE2;
			}
		</style>
	</head>
	<body>
		<button type="button" class="btn-border">button</button>
	</body>
</html>

小黄鸭htt

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
button 动画 border

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> button{ border: 0; background: transparent; display: inline-block; height: 35px; margi
复制链接

扫一扫