使用before和:after伪类制作css3圆形按钮


Posted in HTML / CSS onApril 08, 2014

使用before和:after伪类制作css3圆形按钮

制作步骤:

一, <head>标签结构

下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”

复制代码
代码如下:

<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;
}</p> <p>.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,制作结束。是不是简单得让人抬不起精神呢? 赶紧动手试试吧。再次申明演示地址到文章的开始处已经给出了哦,找找看啊。

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

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

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

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

HTML / CSS 相关文章推荐
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
You might like
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python 正则表达式的高级用法
2016/12/04 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python气泡提示与标签的实现
2020/04/01 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
渗透攻击的测试步骤
2014/06/07 面试题
资深地理教师自我评价
2013/09/21 职场文书
积极分子思想汇报
2014/01/04 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
一帮一活动总结
2014/05/08 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
学历证明范文
2015/06/16 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
辞职申请书范本
2019/05/20 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers