Home » » Amaizing Css Buttons

Amaizing Css Buttons


Hey wats up
Today i decided to make some css buttons.

Ill update them with a new amaizing pack tomorrow, but for today thats it.

View demo: Css Buttons
Source:

<html>
<head>
<title>Less4us | Css Buttons</title>
<style type="text/css">
#first{
background: #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #6495ED;
padding: 5px;
text-decoration: none;
color: #6495ED;
}
#first:hover{
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid green;
padding: 5px;
text-decoration: none;
}
#second{
background: black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #333;
padding: 5px;
text-decoration: none;
color: #6495ED;
}
#second:hover{
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid gray;
padding: 5px;
text-decoration: none;
color: #ccc;
}
#third{
background: #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid gray;
padding: 5px;
text-decoration: none;
color: #ccc;
}
#third:hover{
background: black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #333;
padding: 5px;
text-decoration: none;
color: #6495ED;
}
#four{
color: gray;
padding: 5px;
border: 1px solid gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
#four:hover{
color: white;
background: black;
border: 1px solid black;
}
#five{
background: #7FFF00;
padding: 5px;
border: 1px solid gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
color: gray;
}
#five:hover{
border: 1px solid #A52A2A;
background: gray;
color: #A52A2A;
}
#six{
border: 1px solid #A52A2A;
background: gray;
color: #A52A2A;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
#six:hover{
color: black;
background: #A52A2A;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Css3 Buttons</h1>
<a href="#" id="first">&#171; Previous</a>
<a href="#" id="first">Home</a>
<a href="#" id="first">Older &#187;</a><br><br>
<a href="#" id="second">&#171; Previous</a>
<a href="#" id="second">Home</a>
<a href="#" id="second">Older &#187;</a><br><br>
<a href="#" id="third">&#171; Previous</a>
<a href="#" id="third">Home</a>
<a href="#" id="third">Older &#187;</a><br><br>
<a href="#" id="four">&#171; Previous</a>
<a href="#" id="four">Home</a>
<a href="#" id="four">Older &#187;</a><br><br>
<a href="#" id="five">&#171; Previous</a>
<a href="#" id="five">Home</a>
<a href="#" id="five">Older &#187;</a><br><br>
<a href="#" id="six">&#171; Previous</a>
<a href="#" id="six">Home</a>
<a href="#" id="six">Older &#187;</a><br><br>
</body>
</html>

0 תגובות:

Post a Comment

Follow by Email