0
|
Hello
You can make attractive button using css3 like
this is the css code style page name is button
body
{
}
.button
{
background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
margin:50px;
cursor:pointer;
margin-top:770px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 0 2px rgba(0,0,0,0.5);
text-shadow:0 0 5px rgba(255,255,255,0.5);
display:inline-block; /* It is important for the button to rotate*/
}
.button:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
background:#99A411;
font-size:30px;
color:#fff;
}
#container {
background-color: #FFFFFF;
float: left;
height: 500px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 20px 0 20px 320px;
position: absolute;
z-index: 0;
}
================================================
Aspx code is
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title> Home </title>
<meta CHarSET="UTF-8">
<link href="Styles/Button.css" rel=stylesheet type="text/css" />
</head>
<body>
<div>
<a class="button" href="Test.aspx">Audio</a>
</Div>
<div style="z-index: 1; left: 60px; top: 50px; position: absolute; height: 20px; width: 10px">
</div>
</dIv>
</body>
</HTML>
============
It Works
Manu
Manoranjan Gupta Manu
9873306227 Zhang Jingchu, if this helps please login to Mark As Answer. | Alert Moderator
|