CSS3 Gradient按钮demo

原创 2016年11月30日 10:40:35

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3 Gradient</title>
	<style type="text/css">
		a{
			text-decoration:none;
			color:#63BDA8;
		}
		.button {
		    border: 1px solid #e9e9e9;
		    border-radius: 3px;
		    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    font-weight: bold;
		    text-align: center;
		    -moz-text-shadow: 1px 1px 0 #fff;
		    -webkit-text-shadow: 1px 1px 0 #fff;
		    text-shadow: 1px 1px 0 #fff;
		    white-space: nowrap;
		    display: block;
		    font-size: 22px;
		    margin: 2em auto;
		    padding: 9px 0 10px;
		    width: 340px;
		    background: #EFEFEF;
		    background: -moz-linear-gradient(top,#F7F7F7 0,#DFDFDF 100%);
		    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F7F7F7),color-stop(100%,#DFDFDF));
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 );
		}
		.button:hover {
		    border-color: #63BDA8;
		    color: #fff;
		    font-weight: normal;
		    text-decoration: none;
		    -moz-text-shadow: none;
		    -webkit-text-shadow: none;
		    text-shadow: none;
		    background: #95D9C8;
		    background: -moz-linear-gradient(top,#95D9C8 0,#63C8B8 100%);
		    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#95D9C8),color-stop(100%,#63C8B8));
		    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#95D9C8',endColorstr='#63C8B8',GradientType=0);
		}
	</style>
</head>
<body>
	<a href="#quick-start" class="button">
        <span class="extra">Gradient 按钮</span>
    </a>
</body>
</html>


神奇的 conic-gradient 圆锥渐变

感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gra...
  • qq_31116415
  • qq_31116415
  • 2017年07月05日 10:58
  • 230

css3 gradient 详解

CSS3 Gradient暂未整理,可以把这些内容粘贴到支持markdown的编辑器(比如 http://maxiang.info/)中阅读。 Gradient 分为线性渐变 linear-grad...
  • lihongxun945
  • lihongxun945
  • 2015年07月02日 16:10
  • 2359

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示: 在线演示地址见here。使用完全使用CSS实现,无需JS。源码如下...
  • K346K346
  • K346K346
  • 2017年01月09日 13:17
  • 825

CSS3 gradient

看到一篇不错的关于CSS3 gradient的文章,文章链接如下:http://www.w3cplus.com/content/css3-gradient...
  • coder_run
  • coder_run
  • 2015年05月08日 10:23
  • 181

css3 gradient

CSS3的线性渐变:  一、线性渐变在Mozilla下的应用  语法: -moz-linear-gradient( [ || ,]? , [, ]* .example1 { backgro...
  • nbu00319
  • nbu00319
  • 2014年02月13日 12:08
  • 331

css3按钮波纹效果

Document #box{ width: 200px; height: 60px; ma...
  • u014798510
  • u014798510
  • 2016年12月09日 16:08
  • 1086

CSS3 Gradient

http://www.cnblogs.com/gaoxue/articles/CSS3Gradient-1.html CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已...
  • liumf2005
  • liumf2005
  • 2013年09月30日 00:00
  • 310

无需图片,使用CSS3实现圆角按钮[转]

首先来看看效果:   事例HTML代码: a href="#" class="button green">buttona> a href="#" class="button blue...
  • xiongnanbin
  • xiongnanbin
  • 2014年04月27日 12:43
  • 597

CSS3:渐变(gradient)用法详解

花样展示CSS3实现渐变效果~~~
  • bomess
  • bomess
  • 2016年04月14日 15:30
  • 5312

CSS3动画demo

学习要点: (1)核心在于引入了animation这个属性: animation: name duration timing-function delay iteration-count dire...
  • yz764127031
  • yz764127031
  • 2017年03月30日 21:59
  • 256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 Gradient按钮demo
举报原因:
原因补充:

(最多只允许输入30个字)