html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮
网页UI设计追求精美漂亮,除此之外,实现代码也越趋于简单易用。本文就介绍如何用CSS3实现渐变/立体/扁平的漂亮按钮,代码简单易用,但是效果却是十分之好。
CSS3实现渐变/立体/扁平的漂亮按钮
按钮功能易于使用。
包含渐变技巧的过渡。
未使用任何图像,而是使用base64字符串创建图案效果。
分组时修饰按压行为。
按钮
基本上,要创建一个按钮,唯一要做的就是:Button
或者:Button
您也可以使用类似方法,但是为了获得最佳的跨浏览器渲染效果,请坚持上述操作。
css.button{
display: inline-block;
*display: inline;
zoom: 1;
padding: 6px 20px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 13px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
background-image: linear-gradient(top, rgba(255,255,255,1),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
transition: background-color .2s ease-out;
background-clip: padding-box; /* Fix bleeding */
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.button:hover{
background-color: #eee;
color: #555;
}
.button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
不同的按钮尺寸
如果您想使号召性用语更加醒目或不那么醒目,则可以选择以下选项:
不同的按钮尺寸Button
或者Button
css/* Smaller buttons styles */
.button.small{
padding: 4px 12px;
}
/* Larger buttons styles */
.button.large{
padding: 12px 30px;
text-transform: uppercase;
}
.button.large:active{
top: 2px;
}
各种按钮颜色
您需要使用自定义颜色才能成功执行操作,也需要使用否定颜色作为删除操作:
各种按钮颜色Button
Button
Button
Button
css.button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background-image: linear-gradient(top, rgba(255,255,255,.3),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}
/* */
.button.green{
background-color: #57a957;
border-color: #57a957;
}
.button.green:hover{
background-color: #62c462;
}
.button.green:active{
background: #57a957;
}
/* */
.button.red{
background-color: #c43c35;
border-color: #c43c35;
}
.button.red:hover{
background-color: #ee5f5b;
}
.button.red:active{
background: #c43c35;
}
/* */
.button.blue{
background-color: #269CE9;
border-color: #269CE9;
}
.button.blue:hover{
background-color: #70B9E8;
}
.button.blue:active{
background: #269CE9;
}
禁用状态按钮
如果您正在使用按钮或输入,在某些情况下,您将需要禁用它们,直到触发特定任务为止:
禁用状态按钮Button
Button
Button
Button
css.button[disabled], .button[disabled]:hover, .button[disabled]:active{
border-color: #eaeaea;
background: #fafafa;
cursor: default;
position: static;
color: #999;
/* Usually, !important should be avoided but here it's really needed :) */
box-shadow: none !important;
text-shadow: none !important;
}
.green[disabled], .green[disabled]:hover, .green[disabled]:active{
border-color: #57A957;
background: #57A957;
color: #D2FFD2;
}
.red[disabled], .red[disabled]:hover, .red[disabled]:active{
border-color: #C43C35;
background: #C43C35;
color: #FFD3D3;
}
.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
border-color: #269CE9;
background: #269CE9;
color: #93D5FF;
}
分组按钮
在某些情况下,您需要将类似的号召性用语按钮分组:
分组按钮
- Button
- Button
- Button
- Button
css.button-group,
.button-group li{
display: inline-block;
*display: inline;
zoom: 1;
}
.button-group{
font-size: 0; /* Inline block elements gap - fix */
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .04);
border-bottom: 1px solid rgba(0, 0, 0, .07);
padding: 7px;
border-radius: 7px;
}
.button-group li{
margin-right: -1px; /* Overlap each right button border */
}
.button-group .button{
font-size: 13px; /* Set the font size, different from inherited 0 */
border-radius: 0;
}
.button-group .button:active{
box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
5px 0 5px -3px rgba(0, 0, 0, .2) inset,
-5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}
.button-group li:first-child .button{
border-radius: 3px 0 0 3px;
}
.button-group li:first-child .button:active{
box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
-5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}
.button-group li:last-child .button{
border-radius: 0 3px 3px 0;
}
.button-group li:last-child .button:active{
box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,
5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}
浏览器兼容性
CSS3模式按钮可在所有主要浏览器中使用。但是,当然,此处使用的CSS3功能在IE8及以下版本的浏览器中不起作用。
相关文章推荐
html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮相关推荐
- html中css3渐变效果,CSS3 渐变
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
- 聊一聊CSS3的渐变——gradient
关于渐变 时下,渐变(gradient)效果在页面设计中已经变得越来越常见了.而且现在的CSS3对于渐变的支持也已经足够的丰富了.虽然我们可能使用过CSS3中的line-gradient属性或radi ...
- css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
- 用css3径向渐变制作花纹背景
我们可以通过多种css3渐变的叠加制作各种各样好看的花纹 css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变. 制作格子花纹: 代码如下: .bg{width: 120px;height: 2 ...
- CSS3: 线性渐变用法详解
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv {width:400px;height:400px;border:1p ...
- css3 文字横向渐变,CSS3实现渐变文字效果
本文主要和大家分享CSS3实现渐变文字效果,我们主要和大家分享两种方法,希望能帮助到大家. 一.方法一:借助mask-image属性 方法一下的文字渐变效果 相应的HTML代码如下: 天赐美妞 与HT ...
- 纯CSS3文字 渐变内发光投影效果
今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 一般我们都是用css3的box ...
- CSS3 线性渐变(linear-gradient)
在CSS3出现之前,渐变效果只能通过图形软件(比如Photoshop)设计图片来实现,可拓展性差,还影响性能,而且还必须要会PS.如今通过CSS3可以很轻松的完成渐变效果. 一.线性渐变的基础知识介绍 ...
- css3颜色渐变:css3如何实现背景颜色渐变?
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
最新文章
- 同向逆向、多车道线检测
- Customize a Scheduling Policy
- 面试中必知必会的那些题——单链表倒置
- 北京大学孙俊教授课题组深度视频研究室招收2021级博士生
- 零基础学Python(第六章 if条件语句)
- iOS_CNBlog项目开发 (基于博客园api开发) 上篇
- Linux Shell编程笔记7 awk的应用
- python入门代码大全-初学python有哪些可以临摹的小段练习代码素材?
- linux arm9开发环境,ARM9开发板Qt环境的搭建
- 简单的解决idea tomcat run正常debug报错
- linux打印机无法识别usb,ubuntu下无法识别打印机,求教!
- echart demo
- CUDA编程1--GPU内存模型
- mysql raw_rails - 直接执行raw sql. 查询mysql的基本数据
- css 解决因为书名号不满一行就换行情况
- 关于javaBean运行后出现Name was not previously introduced as per JSP.5.3的解决方法
- 阿里云国际版ECS,虚拟主机和VPS托管之间的区别
- c++构造函数的定义
- python re库 正则表达式
- NOIP2018普及赛后总结
热门文章
- 萨克斯的最佳清洁办法
- Android解析JSON,你真的需要三方库?
- STM32CUBEMX(7)--移植雅特力AT32F403AVGT(兼容STM32F103VGT6),DAC输出电压
- R语言|求ROC和AUC值
- 2022年端午二三事小记
- CAN总线概况与原理(转)
- LeetCode-求一个集合的子集
- STM32HAL库定时器中断关闭的方法
- bzoj 2244: [SDOI2011]拦截导弹 cdq分治
- openlayers摸爬滚打 3.图层layer和feature的学习和简单例子