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 开发工具收集
Apr 17 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
Home Coffee Roasting
2021/03/03 咖啡文化
php设计模式 Factory(工厂模式)
2011/06/26 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
浅谈json_encode用法
2015/03/05 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python操作excel让工作自动化
2019/08/09 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
通俗讲解python 装饰器
2020/09/07 Python
运行Python编写的程序方法实例
2020/10/21 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
CSS3简单实现照片墙
2014/12/12 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
创业融资计划书
2014/04/25 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
python基础之停用词过滤详解
2021/04/21 Python