Heim  >  Artikel  >  Web-Frontend  >  css按钮渐变色

css按钮渐变色

PHP中文网
PHP中文网Original
2017-03-22 10:12:093263Durchsuche

CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,这些按钮的大小可以容易地适应。 这种方法最好的部分就是能被应用于任何HTML元素,比如 p, span, p, a, button, input, 等等。

为什么这些按钮如此的酷?

纯 CSS: 没有图片和Javascript的应用。

渐变可以跨浏览器应用 (IE, Firefox 3.6, Chrome, and Safari).

灵活和可扩展: 通过改变字体大小和填充值,按钮的大小和圆角可以调整。

它有三个按钮状态: normal, hover 和 active。

能被应用于任何HTML元素,比如a, input, button, span, p, p, h3, 等等。

备注:如果CSS3不被支持,它将会显示成普通按钮 (没有渐变和阴影)。

预览

下面的图片展示的是不同的浏览器的不同的显示效果。

按钮的几个状态

正常状态 = 渐变并带有加粗和阴影效果。

悬停 = 更深的渐变

激活 = 反向渐变, 向下1px, 同时有更深的字体。

按钮的一般样式

下面的代码是类.button 的一般样式。 为了基于字体大小变化而能自由伸缩,我在填充(padding)和边界半径border-radius时用了em值。要调整圆角和按钮的大小,简单地改变边界半径,字体大小和填充值。 比如:我可以通过减小字体大小(font-size)和填充值(padding values)做一个更小的按钮.

.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.button:hover {text-decoration: none;}.button:active {position: relative;top: 1px;}

色彩的一般样式

下面的代码是橘黄色的css样式。 第一行的background 是一个备用,针对不支持CSS3 的浏览器, 第二行的background是为 Webkit这类浏览器, 第三行的background是为Firefox,最后一行是filter只被Internet Explorer识别。

.orange {color: #fef4e9;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top,  #faa51a,  #f47a20);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}.orange:hover {background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background: -moz-linear-gradient(top,  #f88e11,  #f06015);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');}.orange:active {color: #fcd3a5;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background: -moz-linear-gradient(top,  #f47a20,  #faa51a);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}

如何使用我的按钮?

比如你喜欢蓝色的按钮,并想应用在你的页面:

首先, 复制 .button 和 .blue 的CSS.

然后, 增加到你想要成为按钮的 HTML 元素 (比如 9dba6f1f949f5e07bed667bf670fd9c4Button5db79b134e9f6b82c0b36e0489ee08ed),如下图。 CSS 能被应用于 link, p, span, p, input, button, 等元素。

相关文章:

HTML5 Canvas:绘制渐变色

div+css背景渐变色代码示例

css渐变色彩 省略标记 嵌入字体 文本阴影的详细介绍

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS注释的一些高级用法介绍Nächster Artikel:步骤进度条 css