html5 CSS3 渐变按钮

最新推荐文章于 2023-04-21 10:00:00 发布
最新推荐文章于 2023-04-21 10:00:00 发布
阅读量2.6k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yycgis/article/details/16965477
版权

html5 CSS3 渐变按钮

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Cross-browser CSS gradient buttons demo</title>
		<style>
			body 
			{
				background: #e5e5e5;
				text-align: center;
			}  
			/*----------------------------*/
			.button 
			{
				margin: 10px;
				text-decoration: none;
				font: bold 1.5em 'Trebuchet MS', Arial, Helvetica;
				/*更变按钮的大小来个调整位置*/
				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; /* 上边框样式 */
				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;
				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 
			{ 
			  /* 按钮点击 更变button位置，从而出现动态效果*/
				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>
		
		<!-- AdPacks -->
		<style>
			#adpacks-wrapper 
			{
				font-family: Arial, Helvetica;
				width: 280px;
				position: fixed;
				_position: absolute;
				bottom: 0;
				right: 20px;
				z-index: 9999;
				background: #eaeaea;
				padding: 10px;
				-moz-box-shadow: 0 0 15px #444;
				-webkit-box-shadow: 0 0 15px #444;
				box-shadow: 0 0 15px #444;
			}
			 
			body .adpacks 
			{
				background: #fff;
				padding: 15px;
				margin: 15px 0 0;
				border: 3px solid #eee;
			}
			 
			body .one .bsa_it_ad 
			{
				background: transparent;
				border: none;
				font-family: inherit;
				padding: 0;
				margin: 0;
			}
			 
			body .one .bsa_it_ad .bsa_it_i 
			{
				display: block;
				padding: 0;
				float: left;
				margin: 0 10px 0 0;
			}
			 
			body .one .bsa_it_ad .bsa_it_i img 
			{
				padding: 0;
				border: none;
			}
			 
			body .one .bsa_it_ad .bsa_it_t 
			{
				padding: 0 0 6px 0;
				font-size: 11px;
			}
			 
			body .one .bsa_it_p {
				display: none;
			}
			 
			body #bsap_aplink,body #bsap_aplink:hover 
			{
				display: block;
				font-size: 9px;
				margin: -15px 0 0 0;
				text-align: right;
			}
			 
			body .one .bsa_it_ad .bsa_it_d 
			{
				font-size: 11px;
			}
			 
			body .one 
			{
				overflow: hidden
			}
		</style>
	</head>
	<body>
		<h1>html5 CSS3 渐变按钮</h1>
		<a href="http://www.clxgj.com" class="button button-khaki"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-blue"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-brown"><span>Button</span></a>
		<br>
		<a href="http://www.clxgj.com" class="button button-red"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-purple"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-green"><span>Button</span></a>
		<br>
		<a href="http://www.clxgj.com" class="button button-black"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-orange"><span>Button</span></a>
		<a href="http://www.clxgj.com" class="button button-silver"><span>Button</span></a>
	</body>
</html>

截图如下：





yycgis
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
用a作登陆按扭的实现代码+css3 按钮简单10种颜色线性渐变web buttons网页按钮
08-24
用a作登陆按扭的实现代码+css3 按钮简单10种颜色线性渐变web buttons网页按钮
html渐变按钮,CSS按钮渐变动画
weixin_36255837的博客
06-26 251
css:root {--font: 1rem/1.2 "helvetica", sans-serif;--bg-hover: linear-gradient(135deg,#101ee7 0%,#2654e9 20%,#62d6fa 37%,#fff 50%,#fc35ca 66%,#7559ff 72%,#101ee7 100%);--btn-color: #2e175e;}/* formati...
css html 渐变按钮
石宗昊的博客
03-08 243
.btn{background:-webkit-linear-gradient(left, #FF0000 0%, #4d4c4c 0%, #252220 100%);background:linear-gradient(90deg, #FF0000 0%, #FF0000 0%, #FF0000 100%);border-radius:1rem;width:100%;height:2.88rem;display:-webkit-box;display:-ms-flexbox;display:flex;-.
CSS3渐变色按钮
moliyll的专栏
05-29 3904
上一篇文章介绍了css3的渐变色属性，今天带来CSS3渐变特性的应用。可以去看一组按钮，我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时，这些按钮的大小可以容易地适应。 这种方法最好的部分就是能被应用于任何HTML元素，比如 div, span, p, a, button, input, 等等。 为什么这些按
HTML5+CSS3实现时尚美观的渐变按钮
最新发布
DICA的SEOer专栏
04-21 1039
在上面的代码中，我们使用了CSS3的linear-gradient函数来定义渐变背景色，通过传递多个颜色值可以创建多色渐变。同时，我们使用了transition属性来实现鼠标悬浮时渐变背景色的过渡效果。最后，我们使用了box-shadow属性来添加阴影效果，使得按钮看起来更加立体。
HTML5 css3渐变按钮代码.rar
07-10
在本压缩包"HTML5 css3渐变按钮代码.rar"中，包含的是一个使用纯HTML5和CSS3实现的渐变按钮的示例代码。这个例子特别之处在于它没有依赖JavaScript或任何图片资源，完全通过CSS3的属性来创建按钮的渐变效果。 首先...
纯css3背景渐变按钮特效.zip
11-25
总结来说，“纯css3背景渐变按钮特效”是一个关于利用CSS3、HTML5以及可能的JavaScript和jQuery来创建动态、视觉上吸引人的按钮的示例。它展示了如何利用现代前端技术提升用户体验，特别是在用户界面设计中增加互动...
CSS3彩色渐变圆角按钮特效
07-24
本文将深入探讨“CSS3彩色渐变圆角按钮特效”这一主题，结合给定的标签，我们将围绕CSS3、CSS3按钮、圆角按钮以及鼠标悬停效果进行详细讲解。 首先，CSS3是Web标准的一部分，它允许我们定义更复杂的样式，包括但不...
html5 css3 动态气泡按钮实例演示
09-25
总之，这个HTML5 CSS3动态气泡按钮实例充分利用了CSS3的多重背景、渐变和过渡属性，展示了如何用纯CSS创建交互式和视觉吸引人的网页元素。这种方法不仅可以提高网页的性能，还能增强用户的交互体验，是现代网页设计...
近100款漂亮CSS3/HTML5按钮合集.rar
07-10
总的来说，这个资源包是关于如何使用CSS3和HTML5来创建多样化的、美观的网页按钮的一个集合，涵盖了颜色、形状、阴影、渐变等多个设计元素，展示了这两种技术在现代网页设计中的广泛应用和无限可能性。对于想要提升...
css3 按钮简单10种颜色线性渐变web buttons网页按钮
11-04
css3 按钮简单10种颜色线性渐变web buttons网页按钮 css3 按钮简单10种颜色线性渐变web buttons网页按钮
html5 渐变按钮练习
weixin_33716941的博客
09-30 120
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渐变按钮</title> <link rel="stylesheet" href="style1.css" type="text/css"></head&g...
css渐变按钮样式
szxmqr的博客
10-03 392
css
一组简单好看的css3渐变按钮
weixin_30920091的博客
08-28 557
主要代码如下: 1 body { 2 background:#fff 3 } 4 /* Mixins */ 5 /* bg shortcodes */ 6 .bg-gradient1 span,.bg-gradient1:before { 7 background:#52A0FD; ...
html中按钮怎么设置渐变色,CSS3渐变色按钮
weixin_42361112的博客
06-16 1907
上一篇文章介绍了css3的渐变色属性，今天带来CSS3渐变特性的应用。可以去看一组按钮，我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时，这些按钮的大小可以容易地适应。 这种方法最好的部分就是能被应用于任何HTML元素，比如 div, span, p, a, button, input, 等等。为什么这些按钮如此的...
要设计一个具有渐变效果的HTML5按钮，你可以使用CSS3的线性渐变（linear-gradient）功能
BLOG域名:programb.blog.csdn.net
07-03 744
background-image 属性设置了从左到右的线性渐变背景，起始颜色为 #ff512f，结束颜色为 #dd2476。当鼠标悬停在按钮上时，通过 :hover 伪类改变了渐变的方向，从而实现了渐变颜色的交换效果。/* 鼠标悬停时的渐变背景 */要设计一个具有渐变效果的HTML5按钮，你可以使用CSS3的线性渐变（linear-gradient）功能。你可以根据需要调整颜色、内边距、字体大小、边框圆角等样式属性，以达到你想要的外观效果。/* 让按钮居中显示 */背景渐变过渡效果 */
html 渐变
a138984的专栏
02-06 583
background-image: -moz-linear-gradient(top, #00FF00, #FF0000); /*火狐*/ background: -o-linear-gradient(top, #00FF00 0%,red 100%);/*Opera*/ background-image: -webkit-gradient(linear, left top, left bot
html渐变色原理,利用Html + CSS做一个动态渐变色按钮
weixin_42706667的博客
05-30 698
效果图button点击效果图难点解析1.按钮渐变属性：linear-gradient( 135deg, #FAB2FF 10%, #1904E5 100%)，意思为线性渐变，135的倾斜度，渐变的色号和透明度。2.hover状态下渐变色变化：background-size: 200%;要将背景大小设置为200%；background-position: right; 然后hover状态时，进行位...
用html和css做渐变按钮,利用CSS3制作发光渐变动画按钮
weixin_28693683的博客
06-19 347
CSS3标准新增动画(animation)属性(@-webkit-keyframes)，通过简单的定义动画过程的三个帧即可实现完美的动画效果。实例预览：radioactive buttons css3 animation说明：现阶段，由于部分浏览器对CSS3标准支持的力度不够，为了更好的展现面的动画效果，请使用Safari 4.x版本以上浏览器，或者高版本的Firefox浏览器。实现过程1. 定义...
HTML5 CSS3开发优势与实战技巧
“HTML5+CSS3页面制作分享，讲解了HTML5和CSS3在移动互联网应用中的优势，以及它们带来的新特性和功能，包括跨平台、语义化、性能优化等，并介绍了Webview中常用的CSS3属性和HTML5属性。” 在当前的网页设计和开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yycgis

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值