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">« Previous</a> | |
| <a href="#" id="first">Home</a> | |
| <a href="#" id="first">Older »</a><br><br> | |
| <a href="#" id="second">« Previous</a> | |
| <a href="#" id="second">Home</a> | |
| <a href="#" id="second">Older »</a><br><br> | |
| <a href="#" id="third">« Previous</a> | |
| <a href="#" id="third">Home</a> | |
| <a href="#" id="third">Older »</a><br><br> | |
| <a href="#" id="four">« Previous</a> | |
| <a href="#" id="four">Home</a> | |
| <a href="#" id="four">Older »</a><br><br> | |
| <a href="#" id="five">« Previous</a> | |
| <a href="#" id="five">Home</a> | |
| <a href="#" id="five">Older »</a><br><br> | |
| <a href="#" id="six">« Previous</a> | |
| <a href="#" id="six">Home</a> | |
| <a href="#" id="six">Older »</a><br><br> | |
| </body> | |
| </html> |
No comments:
Post a Comment