код css3:
a:link {text-decoration: none; color:#fff;}a:visited {text-decoration: none; color:#fff;}
a:active {text-decoration: none; color:#fff;}
a:hover {text-decoration: none; color:#fff;}
.c{
color: #ffffff;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
width: 60px;
height:30px;
padding-left:17px;padding-top:6px;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ff0000), to(#000000));
background: -webkit-radial-gradient(circle, #ff0000, #000000);
background: -moz-radial-gradient(circle, #ff0000, #000000);
background: -o-radial-gradient(circle, #ff0000, #000000);
background: -ms-radial-gradient(circle, #ff0000, #000000);
background: radial-gradient(circle, #ff0000, #000000);
background-color: #ff0000;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-o-border-radius: 150px;
-ms-border-radius: 150px;
border-radius: 150px;
-webkit-box-shadow: 2px 2px 2px #ff0000, inset 3px 3px 3px #ffffff;
-moz-box-shadow: 2px 2px 2px #ff0000, inset 3px 3px 3px #ffffff;
-o-box-shadow: 2px 2px 2px #ff0000, inset 3px 3px 3px #ffffff;
-ms-box-shadow: 2px 2px 2px #ff0000, inset 3px 3px 3px #ffffff;
box-shadow: 2px 2px 2px #ff0000, inset 3px 3px 3px #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
код html:
<html><head>
<title>бутон с css3</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p class="c"><a href="#">HOME</a><p>
<body>
</html>
Ето и още един пример:
 |
 |
.d a:link {text-decoration: none; color:#fff;}
.d a:visited {text-decoration: none; color:#fff;}
.d a:active {text-decoration: none; color:#fff;}
.d a:hover {text-decoration: none; color:#fff; text-shadow: -2px -1px 4px #034C00;}
.d
{
color: #ffffff;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
width: 65px;
height:20px;
padding-left:20px;padding-top:1px;
background: -webkit-gradient(linear, left top, right top, from(#00ff00), to(#000000));
background: -webkit-linear-gradient(top, #00ff00, #000000);
background: -moz-linear-gradient(top, #00ff00, #000000);
background: -o-linear-gradient(top, #00ff00, #000000);
background: -ms-linear-gradient(top, #00ff00, #000000);
background: linear-gradient(top, #00ff00, #000000);
background-color: #00ff00;
-webkit-border-radius: 100px 0px 100px 0px;
-moz-border-radius: 100px 0px 100px 0px;
-o-border-radius: 100px 0px 100px 0px;
-ms-border-radius: 100px 0px 100px 0px;
border-radius: 100px 0px 100px 0px;
-webkit-box-shadow: 2px 2px 2px #005400, inset 2px 2px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 2px #005400, inset 2px 2px 2px rgba(0, 0, 0, 1);
-o-box-shadow: 2px 2px 2px #005400, inset 2px 2px 2px rgba(0, 0, 0, 1);
-ms-box-shadow: 2px 2px 2px #005400, inset 2px 2px 2px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 2px #005400, inset 2px 2px 2px rgba(0, 0, 0, 1);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 1px 1px 1px #00ff00;
}
код html:
<html>
<head>
<title>бутон втори вид с css3</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p class="d"><a href="#">HOME</a><p>
<body>
</html>
Няма коментари:
Публикуване на коментар