霓虹灯闪烁

最新推荐文章于 2021-06-09 14:58:33 发布

原创最新推荐文章于 2021-06-09 14:58:33 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {
	background: #333;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
	.wall-of-buttons { width: 100%; height: 180px; text-align: center; }
		.wall-of-buttons a.button { display: inline-block; margin: 0 10px 9px 0; } 


		a.button {
			-webkit-animation-duration: 2s;
			-webkit-animation-iteration-count: infinite; 
		}




.button {
	background: #222 url(overlay-button.png) repeat-x 0 0;
	display: inline-block;
	padding: 5px 15px 6px;
	color: #fff !important;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	position: relative;
	cursor: pointer;
	overflow: visible;
	width: auto;
}
.green.button {
	-webkit-animation-name: greenPulse;
	-webkit-animation-duration: 3s;
}
.green.button {
	background-color: #91bd09;
}
.green.button:hover {
	background-color: #749a02;
}
 button::-moz-focus-inner {
border: 0;
padding: 0;
}
.button:hover {
	background-color: #111;
	color: #fff;
}
.button:active {
	-webkit-transform: translateY(1px);
	-moz-transform: translateY(1px);
}
 @-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;
}
}
</style>
</head>


<body>
<a class="large green button">Look at me!</a>
</body>
</html>