CSS立体按钮效果

2024-07-11 09:01:13

字体：大中小

来源：转载

供稿：网友

head title 立体按钮-www.cxybl.com / title style type = text/css #elButtona{ color:#000000; font-size:12px; font-family:verdana; font-weight:bold; text-decoration:none; border:4pxoutsetaqua; background-color:#00ffff; display:block; width:13

<head> 
<title>立体按钮 - www.cxybl.com</title> 
<style type="text/css"> 
#elButton a { 
color: #000000; 
font-size:12px; 
font-family:verdana; 
font-weight:bold; 
text-decoration: none; 
border:4px outset aqua; 
background-color:#00ffff; 
display: block; 
width: 130px; 
padding: 3px 5px; 
margin: 1px; 
} 
#elButton a:hover { 
background-color: #00c0c0; 
color:#000000; 
padding-left:4px; 
border:4px inset aqua; 
} 
#elButton a { 
color: #000; 
font-size:12px; 
font-family:verdana; 
font-weight:bold; 
text-decoration: none; 
border:4px outset aqua; 
background-color:#00ffff; 
display: block; 
width: 130px; 
padding: 3px 5px; 
margin: 1px; 
} 
#elButton a:hover { 
background: #00c0c0; 
color:#000000; 
padding-left:4px; 
border:4px inset aqua; 
} 
</style> 
</head> 
<body> 
<div id="elButton"> 
<div> 
</div> 
</div> 
</body> 
</html>