纯html5和css3写的放射效果按钮

发表于:2014-07-30 13:17:59 | 阅读数:--次| 作者:小猪仔

摘要：在过去的Web开发中，通常使用图片来做按钮的样式。不过随着CSS3技术的发展，你完全可以通过几行代码来定制一个漂亮的按钮，并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载和设计图片的步骤，并且非常易于编辑、扩展和定制,在线查看效果，复制就可运行

		html5代码
	

运行代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>www.webkfa.com | 纯html5和css3写的放射效果按钮</title>
		<style type="text/css">.transparent.header{background:#333;}section[role="main"]{background:#333;color:#fff;}section[role="main"] h1{color:#fff;}section[role="main"] h2{color:#fff;}section[role="main"] h3{color:#fff;}.button{margin-right:0.5em;border-radius:4px;}ol{margin-left:2em;}div#sidebarAd.cleanslate{background:#444!important;color:#fff!important;}div#sidebarAd.cleanslate .ad-sponsor{color:#ccc!important;}.zurb-footer-top{background:#222;}@-webkit-keyframes bigAssButtonPulse {
	  from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09; }
	  to { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }
	}

	@-webkit-keyframes greenPulse {
	  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
	  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes bluePulse {
	  from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }
	  to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes redPulse {
	  from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100; }
	  to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes magentaPulse {
	  from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }
	  to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes orangePulse {
	  from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; }
	  to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
	}

	@-webkit-keyframes orangellowPulse {
	  from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
	  50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
	  to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
	}

	a.button {
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: infinite; 
	}
	
	.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 3s; }
	.blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 4s; }
	.red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 1s; }
	.magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; }
	.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; }
	.orangellow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s; }
	
	.wall-of-buttons { text-align: center; margin-top: 2em; margin-bottom: 2em; }
	button,.button {
	    border-style: solid;
	    border-width: 0;
	    cursor: pointer;
	    font-family: inherit;
	    font-weight: bold;
	    line-height: normal;
	    margin: 0 0 1.25em;
	    position: relative;
	    text-decoration: none;
	    text-align: center;
	    display: inline-block;
	    padding-top: 0.75em;
	    padding-right: 1.5em;
	    padding-bottom: 0.8125em;
	    padding-left: 1.5em;
	    font-size: 1em;
	    background-color: #2daebf;
	    border-color: #238896;
	    color: white
	}
</style>
	</head>
	<body class="off-canvas hide-extras antialiased dark-page" style="background:rgb(51, 51, 51);">
		<section role="main" class="body">
		<div class="row">
			<div class="large-12 columns wall-of-buttons">
				<a class="green button">Look at me!</a>
				<a class="blue button">Click me!</a>
				<a class="magenta button">Hi ho, Silver!</a>
				<a class="green button">Look at me!</a>
				<a class="red button">I'm Glowing!</a>
				<a class="magenta button">Hi ho, Silver!</a>

				<a class="orange button">Call to Action</a>
				<a class="magenta button">Hi ho, Silver!</a>
				<a class="green button">Look at me!</a>
				<a class="orangellow button">Got clicks?</a>
				<a class="blue button">Click me!</a>
				<a class="red button">I'm Glowing!</a>
				<a class="blue button">Click me!</a>

				<a class="magenta button">Hi ho, Silver!</a>
				<a class="orangellow button">Got clicks?</a>
				<a class="red button">I'm Glowing!</a>
				<a class="orange button">Call to Action</a>
				<a class="green button">Look at me!</a>
				<a class="orangellow button">Got clicks?</a>
				<a class="red button">I'm Glowing!</a>

				<a class="blue button">Click me!</a>
				<a class="orangellow button">Got clicks?</a>
				<a class="blue button">Click me!</a>
				<a class="red button">I'm Glowing!</a>
				<a class="orange button">Call to Action</a>
				<a class="orangellow button">Got clicks?</a>
			</div>
		</div>


		</section>
	</body>
</html>