几款不错的按钮样式

在网页设计中按钮一般默认的都比较“丑”，能不能通过一些好的样式来设计呢，下面学无忧提供几款不错的按钮样式，希望对大家有所帮助。

一、带图标的按钮

·按钮样式截图

·按钮样式代码如下：

 



/* CSS Document */  


/* BUTTONS */


.buttons a, .buttons button{ 	    display:block; 	    float:left; 	    margin:0 7px 0 0; 	    background-color:#f5f5f5; 	    border:1px solid #dedede; 	    border-top:1px solid #eee; 	    border-left:1px solid #eee;


    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 	    font-size:12px; 	    line-height:130%; 	    text-decoration:none; 	    font-weight:bold; 	    color:#565656; 	    cursor:pointer; 	    padding:5px 10px 6px 7px; /* Links */ 	} 	.buttons button{ 	    width:auto; 	    overflow:visible; 	    padding:4px 10px 3px 7px; /* IE6 */ 	} 	.buttons button[type]{ 	    padding:5px 10px 5px 7px; /* Firefox */ 	    line-height:17px; /* Safari */ 	} 	*:first-child+html button[type]{ 	    padding:4px 10px 3px 7px; /* IE7 */ 	} 	.buttons button img, .buttons a img{ 	    margin:0 3px -3px 0 !important; 	    padding:0; 	    border:none; 	    width:16px; 	    height:16px; 	}


/* STANDARD */


button:hover, .buttons a:hover{ 	    background-color:#dff4ff; 	    border:1px solid #c2e1ef; 	    color:#336699; 	} 	.buttons a:active{ 	    background-color:#6299c5; 	    border:1px solid #6299c5; 	    color:#fff; 	}


/* POSITIVE */


button.positive, .buttons a.positive{ 	    color:#529214; 	} 	.buttons a.positive:hover, button.positive:hover{ 	    background-color:#E6EFC2;


    border:1px solid #C6D880; 	    color:#529214; 	} 	.buttons a.positive:active{ 	    background-color:#529214; 	    border:1px solid #529214; 	    color:#fff; 	}


/* NEGATIVE */


.buttons a.negative, button.negative{ 	    color:#d12f19; 	} 	.buttons a.negative:hover, button.negative:hover{ 	    background:#fbe3e4; 	    border:1px solid #fbc2c4; 	    color:#d12f19; 	} 	.buttons a.negative:active{ 	    background-color:#d12f19; 	    border:1px solid #d12f19; 	    color:#fff; 	}


/* REGULAR */


button.regular, .buttons a.regular{ 	    color:#336699; 	} 	.buttons a.regular:hover, button.regular:hover{


    background-color:#dff4ff; 	    border:1px solid #c2e1ef; 	    color:#336699; 	} 	.buttons a.regular:active{ 	    background-color:#6299c5; 	    border:1px solid #6299c5; 	    color:#fff; 	}


二、圆角按钮样式


·按钮样式图片




·样式代码如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link rel="stylesheet" type="text/css" href="" />


<style type="text/css">


 <!--


.clear { /* generic container (i.e. div) for floating buttons */

    overflow: hidden;

    width: 100%;

}


a.button {

    background: transparent url('bg_button_a.gif') no-repeat scroll top right;

    color: #444;

    display: block;

    float: left;

    font: normal 12px arial, sans-serif;

    height: 24px;

    margin-right: 6px;

    padding-right: 18px; /* sliding doors padding */

    text-decoration: none;

}


a.button span {

    background: transparent url('bg_button_span.gif') no-repeat;

    display: block;

    line-height: 14px;

    padding: 5px 0 5px 18px;

}


a.button:active {

    background-position: bottom right;

    color: #000;

    outline: none; /* hide dotted outline in Firefox */

}


a.button:active span {

    background-position: bottom left;

    padding: 6px 0 4px 18px; /* push text down 1px */

}


 --> 

 </style>

</head>

<body>

 <a class="button" href="http://www.xue51.com/" onclick="this.blur();"><span>学无忧css</span></a>

 <a class="button" href="http://www.xue51.com/" onclick="this.blur();"><span>学无忧-www.xue51.com</span></a>

</body>

</html>

 


三、带导角且有背景图片的按钮样式


·按钮样式图片如下：




·按钮样式代码如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link rel="stylesheet" type="text/css" href="" />

<script type="text/javascript" src="btn.js"></script>

<style type="text/css" media="screen">


body { padding: 20px; font-size: 0.85em; font-family: georgia, serif; }

.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }

.btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; }

.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }

.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }

.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }

.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }


* html .btn span,

* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }


.btn.blue { background: #2ae; }

.btn.green { background: #9d4; }

.btn.pink { background: #e1a; }

.btn:hover { background-color: #a00; }

.btn:active { background-color: #444; }

.btn[class] {  background-image: url(shade.png); background-position: bottom; }


* html .btn { border: 3px double #aaa; }

* html .btn.blue { border-color: #2ae; }

* html .btn.green { border-color: #9d4; }

* html .btn.pink { border-color: #e1a; }

* html .btn:hover { border-color: #a00; }


p { clear: both; padding-bottom: 2em; }

form { margin-top: 2em; }

form p .btn { margin-right: 1em; }

textarea { margin: 1em 0;}


  </style>

</head>

<body>

 <p><a href="#" class="btn blue">This is a blue button</a></p>

 <p><a href="#" class="btn green">This should be a green button</a></p>

 <p><big><a href="#" class="btn blue big">Big Text</a></big></p>

 <form method="post" action="#">

 <fieldset>

 <legend>Form Example</legend>

 <div><input type="text" /></div>

 <div><textarea cols="40" rows="10"></textarea></div>

 <p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p>

 </fieldset>

 </form>


</body>

</html>

 


四、较炫的带导角的按钮


·按钮图片如下：




 ·按钮样式代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Image Rollover with CSS</title>

<style type="text/css" media="screen">


a.button { background:url(rss-feed-img.png) repeat 0px 0px; width: 123px; height: 44px; display: block; }


a.button span { display: none; }


a.button:hover { background: url(rss-feed-img.png) repeat 0px -44px; }


</style>

</head>


<body>

<a href="#" class="button">

 <span>RSS Feeds</span>

</a>

</body>

</html>

 


以上就是几款不错的按钮样式，你是不是觉得不错呢。


以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索button

                    ，                按钮

                    ，                样式

                    ，                color

                    ，                btn

                    ，                buttons

                                    button按钮

                                    css按钮样式、bootstrap 按钮样式、按钮样式、html按钮样式、checkbox圆形按钮样式，以便于您获取更多的相关知识。
				


				
时间： 2024-09-19 08:54:55

		
		


		


	

	
	

		


		
几款不错的按钮样式的相关文章


								

		

			

                CSS按钮样式之button标签与input type=button的区别详解
			

		

		

									

				转载文章,原文地址:http://ipmtea.net/css/201006/16_5.html   对于每个程序设计者来说,为用户提供一个风格统一的界面是一项不变的要求.但是在网页上实现这种风格统一却显得格外困难,因为不同操作系统.不同浏览器对网页内容的表现方式存在着差       对于每个程序设计者来说,为用户提供一个风格统一的界面是一项不变的要求.但是在网页上实现这种风格统一却显得格外困难,因为不同操作系统.不同浏览器对网页内容的表现方式存在着差异,而且这种差异几乎毫无规律性.在处理表单元			

		

	

				

		

			

                WPF界面设计技巧（2）—自定义漂亮的按钮样式
			

		

		

									

				原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了.   首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮:     然后给各个按钮设置不同的背景颜色:     设置好之后就是这样啦:     然后我们就开始在 App.xaml 文件中定义按钮样式了:     定义的样式			

		

	

				

		

			

                首款集成Facebook按钮手机HTCStatus面市(图)
			

		

		

									

				HTC Status手机正面图三款手机对比:黑莓Bold 9700, HTC Status和诺基亚E6(从左至右)HTC Status集成Facebook按钮 新浪科技讯 北京时间7月17日午间消息,AT&T和百思买于本周日开始销售新款Android手机HTC Status,这是首款集成Facebook按钮的手机.通过Facebook按钮,用户可以更方便地向Facebook发送状态信息和照片. 此前,Android手机已经可以很好地支持Facebook.HTC Status集成的Facebook			

		

	

				

		

			

                [HTML/CSS]uploadify自定义按钮样式
			

		

		

									

				概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改.  样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式.  1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 backgroun			

		

	

				

		

			

                CSS3自定义渐变圆角submit按钮样式
			

		

		

									

				随着越来越多的主流浏览器对这些标准的支持,我们已经可以使用其中一些技术来美化页面了. 不必再通过图片来创造具有渐变圆角效果的按钮,会方便很多. 完整代码示例请到 http://www.alleyloft.com/contents/share?id=2 下载 <div class="main"> <!--css3自定义渐变圆角按钮样式--> <input type="submit" class="btn-style-01&quo			

		

	

				

		

			

                选择比较适合自己电脑的Win 7登录界面文字和按钮样式
			

		

		

									

				很多人都会设置自己个性的登录界面,如果你有设置了自己的登录界面,那么你很有必要看下这篇文章,因为系统原先的Win 7登录界面文字和按钮样式不一定适合你的新登录界面,这时候我们就要进行修改,让它更适合. 1 方法非常简单,只需要到注册变更改一下,但是不好的地方就是只有几个模式让我们选择,而不是我们自己设置自己喜欢的模式.而好的地方就是自己设置肯定很难. 2 按下Win+R,输入regedit进入注册表编辑器. 然后定位到:HKEY_LOCAL_MACHINESOFTWAREMicrosoftWin			

		

	

				

		

			

                js实现百度联盟中一款不错的图片切换效果完整实例_javascript技巧
			

		

		

									

				本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现百度联盟中的一个不错的图片切换效果</title> <body> <script> var links = new Array(); links[1] = "http://www.baidu.com/"; links[2] = "http://www.jb5			

		

	

				

		

			

                推荐一款不错的 VPS 控制面板：Ajenti
			

		

		

									

				推荐一款不错的 VPS 控制面板:Ajenti 任何有经验的Linux人员都认为没有任何一款控制面板可以打败纯命令行界面来管理虚拟主机(VPS).也有人争辩说好的控制面板还是应该有一席之地,因为顺滑的操作界面让常规管理操作通过点几下鼠标就可以完成. 至于控制面板,有那种充满浮华装饰的商业控制面板,也有各种免费的但也强大多功能的免费开源面板替代品.这之中的杰出代表是Ajenti控制面板. Ajenti可以让你很简单地配置不同的常规服务程序,如Apache/nginx.Samba.BIND.Squi			

		

	

				

		

			

                按钮添加超级链接，应该怎么改改，或者超链接是按钮样式
			

		

		

									

				问题描述 按钮添加超级链接,应该怎么改改,或者超链接是按钮样式 <html> <head> </head> <body> <div id = "txt"> <form> <input type="submit" value="submit" /> </form> ddss </div> <script language="J