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教程(6):创建网站多列
Apr 02 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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
对javascript和select部件的结合运用
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
webpack v4 从dev到prd的方法
2018/04/02 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
2014教师年度思想工作总结
2014/11/10 职场文书