有金属质感有凹槽阴影的CSS3text-shadow 悬停按钮特效

最新推荐文章于 2023-03-06 10:52:46 发布

shanshuiboy

最新推荐文章于 2023-03-06 10:52:46 发布

阅读量1.4k

点赞数 1

有金属质感有凹槽阴影的CSS3text-shadow 悬停按钮特效,鼠标放在上面的时候，按钮的光影面会发生变化，形成相反的立体按钮效果，这里主要是使用了CSS3技术中的text-shadow:属性，看上去要比传统CSS中的shadow复杂多了，而且更全面了，学会了，在网页上可以省去很多图片了。

<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D立体按钮- www.srcfans.com </title>
<style>
body {
	margin: 0;
	background-color: #404040;
}
#container {
	width: 35em;
	margin: 3em auto;
}
.button-main {
	width: 5em;
	height: 5em;
	background-color: #999;
	background-image: linear-gradient(180deg, #CCC, #999);
	border-top: 3px solid #CCC;
	border-right: 3px solid #CCC;
	border-left: 4px solid #666;
	border-bottom: 4px solid #666;
	border-radius: 1em;
	float: left;
	margin: 3em;
	text-decoration: none;
	box-shadow:  -.1em .1em 0 #000,
				 -.2em .2em 0 #000,
				 -.3em .3em 0 #000,
				 -.4em .4em 0 #333,
				 -.5em .5em 0 #333,
				 -.6em .6em 0 #333,
				 -.7em .7em 0 #333,
				 -.9em .9em 0 #333,
				 -1em 1em 0 #333,
				 -1.1em 1.1em 0 #333,
				 -1.2em 1.2em 0 #333;
	transition: box-shadow 0.3s,
				border-top 0.3s,
				border-right 0.3s;
}
.button-main:hover, .button-main:focus {
	box-shadow: .1em -.1em 0 #333,
				.2em -.2em 0 #333,
				-.1em .1em 0 #333,
				-.2em .2em 0 #333,
				-.3em .3em 0 #333,
				inset -.1em -.1em 2em #FFF,
				-.1em -.1em 2em #666;
	border-top: 3px solid #666;
	border-right: 3px solid #666;
}
.button-inside {
	width: 4em;
	height: 4em;
	margin: .5em auto;
	border-radius: .8em;
	background-color: #CCC;
	background-image: linear-gradient(45deg, #CCC, #999);
	box-shadow: inset -.15em .15em 0 #666,
				inset .1em -.1em 0 #CCC;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3em;
	color: #F2F2F2;
	text-align: center;
	line-height: 1.3em;
	margin: 0 auto;
	text-shadow: -.01em .01em 0 #666,
				 -.02em .02em 0 #666,
				 -.03em .03em 0 #666,
				 -.04em .04em 0 #666,
				 -.05em .05em 0 #666,
				 -.06em .06em 0 #999,
				 -.07em .07em 0 #999,
				 -.08em .08em 0 #999,
				 -.09em .09em 0 #999,
				 -.1em .1em 0 #999,
				 -.11em .11em 0 #999;
}
</style>
</head>
<body>
  <body>
	<div id="container">
        <div class="button-main">
        	<div class="button-inside">
            	<h1>你</h1>
            </div>
        </div>
        <div class="button-main">
        	<div class="button-inside">
            	<h1>我</h1>
            </div>
        </div>
        <div class="button-main">
        	<div class="button-inside">
            	<h1>他</h1>
            </div>
        </div>
	</div>
</body>
</body>
</html>

引自：开源爱好者 http://www.srcfans.com/jscode/jscss/3992.shtml