应用before和:after伪类制做css3圆形按钮

日期:2020-12-12 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页



制做流程:

1, <head>标识构造

下面编码中应用了CSS3无前缀脚本制作prefixfree.js,能够省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”


拷贝编码
编码以下:

<head>
<meta charset="utf⑻">
<title>button</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/button.css" />
<script type="text/javascript">
/*这里选用淡入实际效果试试*/
$(function(){
$(".bt").css("opacity","1");
});
</script>
</head>

2, <body>标识构造

拷贝编码
编码以下:

<body>
<div class="bt">
<div class="button"></div>
<div class="button2"></div>
<div style="clear:both"> </div>
</div>
</body>

3,CSS编码


拷贝编码
编码以下:

* {
padding: 0;
margin: 0;
}
/* 消除波动 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
html, body {
height: 100%;
}
body {
font-family: "Microsoft YaHei";
background: #E1E1E1;
font-weight: 300;
font-size: 15px;
color: #333;
overflow: hidden;
}
a {
text-decoration: none;
}
/*按钮 黑影无拓展 */
.bt {
margin: 100px auto;
display: block;
width: 350px;
opacity:0;
border-bottom: 1px solid #C5C5C5;
border-top: 1px solid #C5C5C5;
box-shadow: 0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;
transition: all 0.5s ease-in;
}</p> <p>.button:before, .button2:before {
content: "";
width: 130px;
height: 130px;
display: block;
z-index: ⑴;
position: relative;
background: #ddd;
left: ⑴5px;
top: ⑴5px;
border-radius: 65px;
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
.button:after, .button2:after {
content: "申请注册";
color: #09F;
font-size: 20px;
width: 100%;
height: 100%;
line-height: 100px;
text-align: center;
position: absolute;
top: 0;
display: block;
}
.button2:after {
content: "登入";
word-spacing: 25px;
color: #A0D989;
}
.button, .button2 {
float: left;
margin: 50px auto;
cursor: pointer;
height: 100px;
width: 100px;
display: block;
position: relative;
color: black;
text-align: center;
line-height: 100px;
border-radius: 50px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
background: #FFF;
transition: all 0.5s ease-in;
}
.button {
float: left;
}
.button2 {
float: right;
}

OK,制做完毕。是否简易得令人抬不起精神实质呢? 赶快动手能力试试吧。再度声明演试详细地址到文章内容的刚开始处早已得出了哦,找找看啊。

下面给大伙儿共享几个线上制做CSS3按钮的网站吧:

1,Live Tools是1个线上UI制做专用工具,他出示了按钮、表单、icon标志和Ribbons的制做专用工具,能够线上配备有关主要参数,转化成你必须的实际效果编码。

2,CSS3 Button Generator是1款简易的按钮转化成专用工具,他能够制做出两种情况下的按钮实际效果,自然你假如必须别的情况的下按钮实际效果,要在其基本上做1些主要参数的转变,相对性来讲不便1点。

3,Button Generator转化成和照片实际效果1样的按钮专用工具。
4,Webarti CSS3 Button Maker是1款十分强劲的按钮线上转化成专用工具,他出示了许多种不一样按钮实际效果让你参照,能够说只需挑选就可以制做出自身必须的按钮,思索的時间都无需你花了。