9种样式CSS3 渐变button集
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 3D渐变button代码</title>
<style>
body
{
background: #e5e5e5;
text-align: center;
}
.button
{
margin: 10px;
text-decoration: none;
font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
display: inline-block;
text-align: center;
color: #fff;
border: 1px solid #9c9c9c;
border: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 .05em rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
}
.button, .button span
{
-moz-border-radius: .3em;
border-radius: .3em;
}
.button span
{
border-top: 1px solid #fff; /* Fallback style */
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding: 0.5em 2.5em;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
}
.button:hover
{
box-shadow: 0 0 .1em rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}
.button:active
{
position: relative;
top: 1px;
}
.button-khaki
{
background: #A2B598;
background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) );
background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BDD1B4', EndColorStr='#A2B598');
}
.button-khaki:hover
{
background: #BDD1B4;
background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) );
background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A2B598', EndColorStr='#BDD1B4');
}
.button-khaki:active
{
background: #A2B598;
}
.button-blue
{
background: #4477a1;
background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}
.button-blue:hover
{
background: #81a8cb;
background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}
.button-blue:active
{
background: #4477a1;
}
.button-brown
{
background: #8f3714;
background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );
background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');
}
.button-brown:hover
{
background: #bf6f50;
background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );
background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');
}
.button-brown:active
{
background: #8f3714;
}
.button-green
{
background: #428739;
background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );
background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');
}
.button-green:hover
{
background: #c8dd95;
background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );
background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');
}
.button-green:active
{
background: #428739;
}
.button-red
{
background: #D82741;
background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );
background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');
}
.button-red:hover
{
background: #E84B6E;
background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );
background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');
}
.button-red:active
{
background: #D82741;
}
.button-purple
{
background: #6F50E7;
background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7');
}
.button-purple:hover
{
background: #B8A9F3;
background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );
background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');
}
.button-purple:active
{
background: #6F50E7;
}
.button-black
{
background: #141414;
background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) );
background: -moz-linear-gradient(-90deg, #656565, #141414);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414');
}
.button-black:hover
{
background: #656565;
background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) );
background: -moz-linear-gradient(-90deg, #141414, #656565);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565');
}
.button-black:active
{
background: #141414;
}
.button-orange
{
background: #f09c15;
background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
}
.button-orange:hover
{
background: #f8c939;
background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );
background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');
}
.button-orange:active
{
background: #f09c15;
}
.button-silver
{
background: #c5c5c5;
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) );
background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#c5c5c5');
}
.button-silver:hover
{
background: #eaeaea;
background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) );
background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c5c5c5', EndColorStr='#eaeaea');
}
.button-silver:active
{
background: #c5c5c5;
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<h1>Cross-browser CSS gradient buttons</h1>
<a href="#" class="button button-khaki"><span>Button</span></a>
<a href="/" class="button button-blue"><span>Button</span></a>
<a href="#" class="button button-brown"><span>Button</span></a>
<br>
<a href="#" class="button button-red"><span>Button</span></a>
<a href="#" class="button button-purple"><span>Button</span></a>
<a href="#" class="button button-green"><span>Button</span></a>
<br>
<a href="#" class="button button-black"><span>Button</span></a>
<a href="#" class="button button-orange"><span>Button</span></a>
<a href="#" class="button button-silver"><span>Button</span></a>
</body>
</html>
9种样式CSS3 渐变button集的更多相关文章
- 几种常用CSS3样式
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- css3渐变之线性渐变
css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向 ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
随机推荐
- jstl笔记
EL函数库 <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- webstorm下开发微信小程序
- JavaSE-05 数组
学习要点 数组的基本用法 数组的典型应用 数组相关概念 问题 Java考试结束后,老师给小强分配了一项任务,让他计算全班(30人)的平均分,按照目前的知识结构,如何实现? 问题分析 数组 定义:数组是 ...
- snowflake机器标识自动绑定
首先附上snowflake源码 package com.yunyihenkey.common.idworker; /** * Twitter_Snowflake<br> * SnowFla ...
- html页面比较长,如何用js实现网页一打开显示在网页的中部？
加入js代码 <style type="text/css"> body { height: 2000px; } </style> <script ty ...
- pycharm 破解
亲测有效! http://blog.lanyus.com/archives/174.html 备注: 注册码破解链接:http://idea.lanyus.com/ 将下载的jar包放入PyCharm ...
- [Python3网络爬虫开发实战] 1.3.2-Beautiful Soup的安装
Beautiful Soup是Python的一个HTML或XML的解析库,我们可以用它来方便地从网页中提取数据.它拥有强大的API和多样的解析方式,本节就来了解下它的安装方式. 1. 相关链接 官方文 ...
- Python之模块和包的创建与使用
一.模块的概念 在计算机的开发过程中,随着程序代码越写越多,在一个文件里代码就越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,放在不同的文件里面,这样,每个文件包含的代码就相对 ...
- Linux最常用的基础命令 下篇
Linux最常用的基础命令个人总结 shell脚本 脚本就是:写一堆指令存成一个文本,用于完成一些小任务 a="123" linux中定义一个变量 echo $a echo $b ...
- 【RQNOJ PID106】最大加权矩形（DP）
题目描述 给定一个正整数n( n<=100),然后输入一个N*N矩阵.求矩阵中最大加权矩形,即矩阵的每一个元素都有一权值,权值定义在整数集上.从中找一矩形,矩形大小无限制,是其中包含的所有元素的 ...