css3 按钮样式简单可扩展创建


Posted in HTML / CSS onMarch 18, 2013

本css教程演示了如何创建简单的可扩展的按钮,使用CSS3的属性,如一些边界半径和线性梯度。

基本按钮类
首先,我们可以创建一个基本的按钮类,没有任何色彩,使我们可以使用不同的颜色。

复制代码
代码如下:

.button {
font-family: sans-serif;
font-weight:bold;
color: #fff;
padding:5px 10px 6px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
cursor: pointer;
}

在上面的代码,我们创建与圆形边界边界半径为MOZILLA,WebKit和Internet Explorer的浏览器。如果您想了解更多有关边界半径财产。

添加不同的颜色
现在,我们已经为圆角按钮的基本结构,我们可以使用不同的颜色,因为我们可能需要使用不同的颜色相同的按钮。
加入简单的背景颜色,而是我们可以利用CSS3的财产线性梯度创建按钮的梯度效应。

例如

复制代码
代码如下:

.blue {
background:#0085cc;
background-image: -moz-linear-gradient(top,#0085cc,#00717f);
background-image: -webkit-gradient(linear,left top,
left bottom,from(#0085cc),to(#00717f) );
}

在上面的代码,我们创建一个简单的梯度Mozilla和Webkit的浏览器。我们还可以添加浏览器不支持渐变属性简单的背景颜色。如果你不熟悉的线性渐变的财产。
对于悬停,我们可以指定一个简单的背景颜色,或如果你愿意,你可以创建类似的梯度悬停。
复制代码
代码如下:

.blue:hover{background:#00717f; }

同样,我们可以通过使用我们的选择的颜色,其他颜色类。请参阅演示页,我用不同的颜色。

按钮大小
我们可以定义按钮的大小不同的类别。所有我们需要做的是指定的字体大小。

复制代码
代码如下:

.small {font-size:12px;}
.medium{font-size:18px;}
.large{font-size:24px;}

完成了!如何使用这些按钮?
按钮可用作
复制代码
代码如下:

<a class="button large blue">Click me!</a>
<a class="button medium blue">Click me!</a>
<a class="button small blue">Click me!</a>
HTML / CSS 相关文章推荐
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 #HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 #HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 #HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 #HTML / CSS
You might like
PHP缓存技术的使用说明
2011/08/06 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python__name__原理及用法详解
2019/11/02 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
实体的生命周期
2013/08/31 面试题
药学专业个人的自我评价
2013/12/31 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
丑小鸭教学反思
2014/02/03 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年科室工作总结
2014/11/20 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL