利用:before和:after伪类制做CSS3 圆形按钮含demo

时间 2019-11-08

标签利用制做 css3 css 圆形按钮 demo 栏目 CSS 繁體版

原文原文链接

要求

必备知识

基本了解CSS语法,初步了解CSS3语法知识。javascript
开发环境

Adobe Dreamweaver CS6css
演示地址

演示地址html

预览截图(抬抬你的鼠标就能够看到演示地址哦):java

制做步骤:jquery

一, <head>标签结构css3

下面代码中使用了CSS3无前缀脚本prefixfree.js,能够省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”，如对该脚本不了解的能够点击下面连接哦:CSS3无前缀脚本prefixfree.js与Animatable使用介绍web

<head>
<meta charset="utf-8">
<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>

二, <body>标签结构工具

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

三，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;
}

.button:before, .button2:before {
    content: "";
    width: 130px;
    height: 130px;
    display: block;
    z-index: -1;
    position: relative;
    background: #ddd;
    left: -15px;
    top: -15px;
    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,制做结束。是否是简单得让人抬不起精神呢? 赶忙动手试试吧。再次申明演示地址到文章的开始处已经给出了哦，找找看啊。ui

下面给你们分享几个在线制做CSS3按钮的网站吧:

1，Live Tools是一个在线UI制做工具，他提供了按钮、表单、icon图标和Ribbons的制做工具，能够在线配置相关参数，生成你须要的效果代码。

2，CSS3 Button Generator是一款简单的按钮生成工具，他能够制做出两种状态下的按钮效果，固然你若是须要其余状态的下按钮效果，要在其基础上作一些参数的变化，相对来讲麻烦一点。

3，Button Generator生成和图片效果同样的按钮工具。

4，Webarti CSS3 Button Maker是一款很是强大的按钮在线生成工具，他提供了不少种不一样按钮效果让你参考，能够说只需选择就能制做出本身须要的按钮，思考的时间都不用你花了。

如以上文章或连接对你有帮助的话，别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也能够点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章。

做者: Li-Cheng

出处: http://www.cnblogs.com/Li-Cheng/p/3644395.html

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。

利用:before和:after伪类制做CSS3 圆形按钮 含demo

要求

必备知识

开发环境

演示地址

利用:before和:after伪类制做CSS3 圆形按钮含demo