CSS3创意样式按钮实现

最新推荐文章于 2024-05-16 03:09:27 发布

楔子

最新推荐文章于 2024-05-16 03:09:27 发布

阅读量718

点赞数

分类专栏：前端文章标签： css3 css 网站建设 html

本文链接：https://blog.csdn.net/xiezi0611/article/details/38702397

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style/css.css" rel="stylesheet" type="text/css">
</head>
<body>

<button class="btn btn-1 btn-1a">Button</button>
<button class="btn btn-1 btn-1b">Button</button>
<button class="btn btn-1 btn-1c">Button</button>
<button class="btn btn-1 btn-1d">Button</button>
<button class="btn btn-1 btn-1e">Button</button>
<button class="btn btn-1 btn-1f">Button</button>

<button class="btn btn-2 btn-2g">Button</button>
</body>
</html>

<style>
body{background: #aaa}
.btn{
    padding:25px 80px;
    transition: all .3s ease;
    background: none;
    cursor: pointer;
    color:#fff;
    display: inline-block;
    margin: 15px 30px;
    position: relative;
    outline: none;
    border: none;
}
.btn:after{
    content:'';
    position: absolute;
    transition: all .3s ease;
    z-index: -1;
}
.btn:before{
    content: '';
    position: relative;
    transition: all .3s ease;
}
.btn-1 {
	border: 3px solid #fff;
	color: #fff;
}    
.btn-1a:hover{
    background: #fff;
    color:blue;
}
    
.btn-1b:after{
    content: '';
    width: 100%;
    height: 0%;
    background: #000;
    left: 0;
    top:0;
} 
.btn-1b:hover:after{
    height: 100%;
}
    
.btn-1c:after{
    content: '';
    width: 0%;
    height: 100%;
    background: #000;
    left: 0;
    top:0;
}
.btn-1c:hover:after{
    width: 100%;
}
.btn-1d{overflow: hidden;}
.btn-1d:after{
    content: '';
    width: 0%;
    height: 105%;
    background: #000;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;
    opacity: 0;
}
.btn-1d:hover:after{
    width: 90%;
    opacity: 1;
}
.btn-1d:active:after{
    width: 100%;
}

    
.btn-1e{overflow: hidden;}
.btn-1e:after{
    content: '';
    height: 200%;
    width: 0;
    background: #000;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    opacity: 0.1;
}
.btn-1e:hover:after{
    width: 200%;
    opacity: 1;
}
.btn-1e:active:after{
    height: 300%;
}
 
.btn-2 {
	background: #cb4e4e;
	color: #fff;
	box-shadow: 0 6px #ab3c3c;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.btn-2g{
    border-radius: 40px;
}
.btn-2g:hover{
    box-shadow: 0px 4px #ab3c3c;
    top:2px;
}
.btn-2g:active{
    box-shadow: 0px 0px;
    top:6px;
}
</style>

自己尝试实现了几个效果，总结下制作方法（如在不同浏览器下看不到效果请在css3属性上加上个浏览器的前缀）：

1：设置按钮的transition属性，做统一的过渡效果，包括按钮的:before，:after的过渡属性。

2：设定不同变化效果。例如高度的变化，阴影的变化，top的属性。

3：必须要设置:before,:after的content属性，即使设置为空。

4：：after的z-index须设置层级在按钮下。

参考地址：http://www.jiawin.com/demos/creative-button-styles/index.html

楔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3创意样式按钮实现

ButtonButtonButtonButtonButtonButtonButtonbody{background: #aaa}.btn{ padding:25px 80px; transition: all .3s ease; background: none; cursor: pointer; color:#fff; d
复制链接

扫一扫