Butoane cu CSS3 pentru blog - Forum

[ Mesaje noi · Membrii · Regulamentul forumului · Căutare · RSS ]
Pagina 1 din 11
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Butoane cu CSS3 pentru blog
Butoane cu CSS3 pentru blog
GravediggerData: Joi, 2013-01-17, 7:05 PM | Mesaj # 1
Gravedigger
Administrator
Grup: Administratori
Mesaje: 542
Premii: 10
Reputatie: 5
Stare: Offline
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 ]]>adauga urmatorul cod CSS:

Cod
<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>

si ultimul pas: unde doresti sa apara butoanele adaugi urmatorul cod HTML:

Cod
<ul class="demobotones"><a href="#">Blogger</a> <a href="#">RSS</a> <a href="#">Contact</a></ul>

 
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Butoane cu CSS3 pentru blog
Pagina 1 din 11
Căutare: