Butoane cu CSS3 pentru blog ~ Pentru Webmasters

Aceasta este o alta forma de a construi butoane fara imagini,folosind umbre si alte efecte cu CSS3,adevarat cu cateva limite, dar functionand cu orice browser.

mergi la Aspect --> Editere HTML/Javascript si inainte de linia ]]></b:skin> adauga urmatorul cod CSS:

<style>
ul.demobotones a {
color: #FFF;
float: left;
font-size: 26px;
height: 40px;
line-height: 40px;
margin: 0 5px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 120px;
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px;
border-radius: 9px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */
background: #65A5ED;
background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */
background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */
box-shadow: 0 0 4px #000; /* W3C */
}
ul.demobotones a:hover{
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */
background: #DCDCDC;
background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */
background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */
}
ul.demobotones a:active{
-moz-box-shadow: 0 0 2px #000; /* Firefox */
-webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */
box-shadow: 0 0 2px #000; /* W3C */
}
</style>