css实现金属质感的按钮效果代码-html代码-BFW代码库

css实现金属质感的按钮效果代码

代码语言：html

代码描述：css实现金属质感的按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        @import url(https://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);
	@import url(prefixes.css);
	html {
	font:62.5%/1 "Droid Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	background-color:hsla(0,0%,90%,1);
	background-image:linear-gradient(-45deg,hsla(0,0%,0%,0),hsla(0,0%,0%,.05));
	background-size:5px
}
body {
	margin:100px
}
button {
	border:0;
	display:block
}
a {
	text-decoration:none;
	display:block
}
.metal {
	position:relative;
	margin:40px auto;
	outline:0;
	font:bold 6em/2em "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
	text-align:center;
	color:hsla(0,0%,20%,1);
	text-shadow:hsla(0,0%,40%,.5) 0 -1px 0,hsla(0,0%,100%,.6) 0 2px 1px;
	background-color:hsl(0,0%,90%);
	box-shadow:inset hsla(0,0%,15%,1) 0 0 0 4px,inset hsla(0,0%,15%,.8) 0 -1px 5px 4px,inset hsla(0,0%,0%,.25) 0 -1px 0 7px,inset hsla(0,0%,100%,.7) 0 2px 1px 7px,hsla(0,0%,0%,.15) 0 -5px 6px 4px,hsla(0,0%,100%,.5) 0 5px 6px 4px;
	transition:color .2s
}
.radial.metal {
	width:160px;
	height:160px;
	line-height:160px;
	border-radius:80px;
	background-image:-webkit-radial-gradient(50% 0,8% 50%,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0) 100%),-webkit-radial-gradient(50% 100%,12% 50%,hsla(0,0%,100%,.6) 0,hsla(0,0%,100%,0) 100%),-webkit-radial-gradient(0% 50%,50% 7%,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0) 100%),-webkit-radial-gradient(100% 50%,50% 5%,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0) 100%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,hsla(0,0%,0%,0) 0,hsla(0,0%,0%,0) 3%,hsla(0,0%,0%,.1) 3.5%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 6%,hsla(0,0%,100%,.1) 7.5%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 1.2%,hsla(0,0%,100%,.2) 2.2%),-webkit-radial-gradient(50% 50%,200% 50%,hsla(0,0%,90%,1) 5%,hsla(0,0%,85%,1) 30%,hsla(0,0%,60%,1) 100%)
}
.metal.radial:.........完整代码请登录后点击上方下载按钮下载查看