要求

    • 必备知识

      基本了解CSS语法,初步了解CSS3语法知识。

    • 开发环境

      Adobe Dreamweaver CS6

    • 演示地址

      演示地址

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

制作步骤:

一, <head>标签结构

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

  1. <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(){
  2.     $(".bt").css("opacity","1");});
    </script>
    </head>

二, <body>标签结构

  1. <body>
  2.       <div class="bt">
  3.           <div class="button"></div>
  4.           <div class="button2"></div>
  5.           <div style="clear:both"> </div>
  6.       </div>
  7. </body>

三，CSS代码

  1. * {
  2.     padding:;
  3.     margin:;
  4. }
  5. /* 清除浮动 */
  6. .clearfix:after {
  7.     content: "";
  8.     display: table;
  9.     clear: both;
  10. }
  11. html, body {
  12.     height: 100%;
  13. }
  14. body {
  15.     font-family: "Microsoft YaHei";
  16.     background: #E1E1E1;
  17.     font-weight:;
  18.     font-size: 15px;
  19.     color: #333;
  20.     overflow: hidden;
  21. }
  22. a {
  23.     text-decoration: none;
  24. }
  25. /*按钮 阴影无扩展 */
  26. .bt {
  27.     margin: 100px auto;
  28.     display: block;
  29.     width: 350px;
  30.     opacity:;
  31.     border-bottom: 1px solid #C5C5C5;
  32.     border-top: 1px solid #C5C5C5;
  33.     box-shadow: 0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;
  34.     transition: all 0.5s ease-in;
  35. }
  36.  
  37. .button:before, .button2:before {
  38.     content: "";
  39.     width: 130px;
  40.     height: 130px;
  41.     display: block;
  42.     z-index: -1;
  43.     position: relative;
  44.     background: #ddd;
  45.     left: -15px;
  46.     top: -15px;
  47.     border-radius: 65px;
  48.     box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  49. }
  50. .button:after, .button2:after {
  51.     content: "注册";
  52.     color: #09F;
  53.     font-size: 20px;
  54.     width: 100%;
  55.     height: 100%;
  56.     line-height: 100px;
  57.     text-align: center;
  58.     position: absolute;
  59.     top:;
  60.     display: block;
  61. }
  62. .button2:after {
  63.     content: "登入";
  64.     word-spacing: 25px;
  65.     color: #A0D989;
  66. }
  67. .button, .button2 {
  68.     float: left;
  69.     margin: 50px auto;
  70.     cursor: pointer;
  71.     height: 100px;
  72.     width: 100px;
  73.     display: block;
  74.     position: relative;
  75.     color: black;
  76.     text-align: center;
  77.     line-height: 100px;
  78.     border-radius: 50px;
  79.     box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  80.     background: #FFF;
  81.     transition: all 0.5s ease-in;
  82. }
  83. .button {
  84.     float: left;
  85. }
  86. .button2 {
  87.     float: right;
  88. }

OK,制作结束。是不是简单得让人抬不起精神呢? 赶紧动手试试吧。再次申明演示地址到文章的开始处已经给出了哦，找找看啊。

下面给大家分享几个在线制作CSS3按钮的网站吧:

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

2，CSS3 Button Generator是一款简单的按钮生成工具，他可以制作出两种状态下的按钮效果，当然你如果需要其他状态的下按钮效果，要在其基础上做一些参数的变化，相对来说麻烦一点。

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

4，Webarti CSS3 Button Maker是一款非常强大的按钮在线生成工具，他提供了很多种不同按钮效果让你参考，可以说只需选择就能制作出自己需要的按钮，思考的时间都不用你花了。

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

作者:Li-Cheng
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

利用:before和:after伪类制作CSS3 圆形按钮 含demo的更多相关文章

  1. 利用:before和:after伪类制作类似微信对话框

    今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  4. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  5. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  6. 使用before、after伪类制作三角形

    使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head>    ...

  7. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  8. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  9. css伪类制作三角箭头

    <meta charset="utf-8"> <style type="text/css"> .tip{ padding: 5px 10 ...

随机推荐

  1. 5.Vue临时上传文件夹

    1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...

  2. WEB版一次选择多个文件进行批量上传(swfupload)的解决方案

    说明:功能完全支持ie和firefox浏览器! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如windo ...

  3. 20169207 《Linux内核原理与分析》第十一周作业

    阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第17,19,20章. 在第17章设备与模块章节,关于设备驱动和设备管理,我们讨论四中内核成分. 1 ...

  4. 关于git的ssh permission denied原因汇总

    SSH关于公钥认证Permission denied (publickey,gssapi-with-mic的问题 http://h2appy.blog.51cto.com/609721/1112797 ...

  5. iOS笔记之UIKit_UITextField

    - (void)viewDidLoad { [super viewDidLoad]; //建立在你已经遵守了<协议UITextFieldDelegate> self.numTF.deleg ...

  6. MySQL5.7Gtid主从复制总是遇到日志被清等出现无法正常主从复制

    最近最是在MySQL5.7上的的gtid主从复制问题总是遇上下面问题: Last_Error: Coordinator stopped because there were error(s) in t ...

  7. Python 高级编程 ——观察者模式

    观察者模式的定义 :定义了对象之间一对多依赖,当一个对象改变状态时,这个对象的所有依赖者都会收到通知并按照自己的方式进行更新. 按照一个气象站的例子来看观察者模式 从气象站取得数据后要在三个布告牌显示 ...

  8. linux常用命令（二）文件上传下载及软件安装

    1.上传下载工具安装 (1)WINDOWS 到linux的文件上传及下载: windows下打开secureCRT,通过SSH连到⾄至远程linux主机:上传下载工具安装命令:yum -y insta ...

  9. [初识]使用百度AI接口,图灵机器人实现简单语音对话

    一.准备 1.百度ai开放平台提供了优质的接口资源https://ai.baidu.com/  (基本免费) 2.在语音识别的接口中, 对中文来说, 讯飞的接口是很好的选择https://www.xf ...

  10. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...