Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Diverse » Butoane cu efecte | Aspectul butoanelor | Butonul Descarcă
Butoane cu efecte | Aspectul butoanelor | Butonul Descarcă
OmulPaianjenData: Luni, 2012-08-20, 11:42 AM | Mesaj # 6
Neconectat
 Instalarea: Panoul de control - Design - Administrarea design-ului (CSS) - adăugaţi aceste stiluri:

Code
.button {       
       width: 200px;       
       margin: 150px auto;       
       }       

       .button a {       
       display: block;       
       height: 50px;       
       width: 200px;       

       color: white;       
       font: 17px/50px Helvetica, Verdana, sans-serif;       
       text-decoration: none;       
       text-align: center;       
       text-transform: uppercase;       

       background: #299a0b; /* Old browsers */       
       background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%); /* FF3.6+ */       
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */       
       background: -webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */       
       background: -o-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Opera 11.10+ */       
       background: -ms-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* IE10+ */       
       background: linear-gradient(top, #299a0b 0%,#299a0b 100%); /* W3C */       
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */       
       }       

       .button a, p {       
       -webkit-border-radius: 10px;       
       -moz-border-radius: 10px;       
       border-radius: 10px;       
             
       -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);       
       -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);       
       box-shadow: 2px 2px 8px rgba(0,0,0,0.2);       
       }       

       p {       
       background: #222;       
       display: block;       
       height: 40px;       
       width: 180px;       
       margin: -50px 0 0 10px;       

       text-align: center;       
       font: 12px/45px Helvetica, Verdana, sans-serif;       
       color: #fff;       

       position: absolute;       
       z-index: -1;       

       -webkit-transition: margin 0.5s ease;       
       -moz-transition: margin 0.5s ease;       
       -o-transition: margin 0.5s ease;       
       -ms-transition: margin 0.5s ease;       
       transition: margin 0.5s ease;       
       }       

       /*HOVER*/       
       .button:hover .bottom {       
       margin: -10px 0 0 10px;       
       }       

       .button:hover .top {       
       margin: -108px 0 0 10px;       
       line-height: 35px;       
       }       

       /*ACTIVE*/       
       .button a:active {       
       background: #00b7ea; /* Old browsers */       
       background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */       
       background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */       
       background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */       
       background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */       
       background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */       
       background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */       
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */       

       }       

       .button:active .bottom {       
       margin: -20px 0 0 10px;       
       }       

       .button:active .top {       
       margin: -70px 0 0 10px;       
       }


Şi acest cod îl adăugaţi unde doriţi să vedeţi butonul:

Code
<div class="button">
<a href="#">Descarcă</a>
<p class="top">Apasă pentru a descărca
<p class="bottom">12Mb | zip
</div>


Rezultatul:

După ducerea cursorului:
 
OmulPaianjenData: Luni, 2012-08-20, 12:16 PM | Mesaj # 7
Neconectat
 Pasul 1: Panoul de control - Design - Administrarea design-ului (CSS) - băgăm aici aceste stiluri:

Code
.download_button1 {display:block; width:131px; height:38px; background:url('http://fierbinte.ucoz.ro/Forum/Diverse/Descarca.png') no-repeat; position:relative; color:#fff; text-shadow:0 1px 2px #000;}
.download_button1:hover {background-position:0 -38px; color:#fff;}
                .error {
                color: #990000;
                background-color: #FFF0F0;
                padding: 7px;
                margin-top: 5px;
                margin-bottom: 10px;
                border: 1px dashed #990000;
}


Pasul 2: Acest cod îl punem acolo unde vrem să vedem imaginea (nu uităm să schimbăm: ADRESA CĂTRE SURSĂ):

Code
<a class="download_button1" href="ADRESA CĂTRE SURSĂ"> </a>


Rezultatul:
Înainte și după poziționarea cursorului pe imagine
 
OmulPaianjenData: Luni, 2012-08-20, 6:19 PM | Mesaj # 8
Neconectat
 Instalarea: Panoul de control - Design - Administrarea design-ului (CSS) - adăugaţi stilurile:

Code
/* Aspect butoane */
.button_blue, .button_gray { text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; display: inline-block; *display: inline; zoom: 1; line-height: 16px;}  
.button_blue input, .button_gray input { border:1px solid; background: none; font-size: 11px; margin: 0px; cursor: pointer; white-space: nowrap; outline: none; padding: 4px 14px 4px; *padding: 5px 14px 3px; font-family: tahoma, verdana, arial, sans-serif, Lucida Sans; overflow: visible;}  
.button_blue input::-moz-focus-inner,.button_gray input::-moz-focus-inner { border:0;}  
.button_blue { border: 1px solid #416796; background: #6485aa;}  
.button_blue input { border-top-color: #7c98ba; border-bottom-color: #5e80a9; border-left-color: #5e80a9; border-right-color: #5e80a9; color: #FFF; text-shadow:0 1px 0 #45688E; *border: 0; background: url('http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/Buton_sur_si_albastru_1.png') #6181a6 repeat-x top; background-position: 0px -16px; *background-position: 0px -16px;}  
.button_blue input:hover { background-position: 0px -8px;}  
.button_blue input:active { background: #5e80a5; border: 1px solid #5e80a5;}  
.button_gray { border: 1px solid #b3b3b3; background: #e0e0e0;}  
.button_gray input {border-top-color: #ffffff;border-bottom-color: #e5e5e5;border-left-color: #e7e7e7;border-right-color: #e7e7e7;color: #444;text-shadow:0 1px 0 #ffffff;*border: 0;background: url('http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/Buton_sur_si_albastru_1.png') #dddddd repeat-x top;background-position: 0px -54px;}  
.button_gray input:hover { background-position: 0px -46px;}  
.button_gray input:active {background: #dcdcdc;border: 1px solid #dcdcdc;}  
@media not screen and (1) {.button_blue input:active, .button_gray input:active {border: none;padding: 5px 15px 5px;}}


Iar acesta e codul butoanelor:

Code
<div class="button_blue"><input class="commSbmFl" id="gbsbm" value="Aventură" type="submit"></div>  
<div class="button_gray"><input value="Comedie" onclick="openhelp()" type="button"></div>


Rezultatul:
 
LiberData: Vineri, 2012-09-21, 11:03 AM | Mesaj # 9
Neconectat
 Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - la urmă adăugați stilurile:

Code
/*Butoane verzi*/    
.gbutton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    
.gbutton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#7da63b;border:1px solid #4a7017;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

/*Butoane galbene*/    
.eButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    
.eButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#e5d31a;border:1px solid #e8b70f;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    

/*Butoane albastre*/    
.bButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    
.bButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#6699cc;border:1px solid #3366cc;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    

/*Butoane roșii*/    
.rButton {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    
.rButton:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#ff3333;border:1px solid #cc0000;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}


iar unde vor fi butoanele, băgați codul:

Code
<a href="#" class="gbutton">Buton verde</a> <a href="#" class="eButton">Buton galben</a> <a href="#" class="rButton">Buton roșu</a> <a href="#" class="bButton">Buton albastru</a>


În caz că doriți să schimbați și butoanele BB (cele de la formularul pentru adăugarea comentariilor), adăugați la urmă, în Stilul foii (CSS), următoarele stiluri:

Code
/*Butoanele BB*/    
    .codeButtons {padding: 6px 6px 6px 6px;text-decoration:none;border:1px solid #dddcb9;color:#6e6d55;background:#e5e4c2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}    
    .codeButtons:hover {padding: 6px 6px 6px 6px;font-weight:normal;background:#7da63b;border:1px solid #4a7017;color:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}


Rezultatul:

Butoanele în mod normal


Butoanele după poziționarea cursorului pe ele


Butoanele codurilor BB
 
LiberData: Marţi, 2012-10-09, 5:37 PM | Mesaj # 10
Neconectat
 Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - aici adăugați stilurile de mai jos.

Code
/* Buton în stil youtube */   
button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow: 0 1px 1px #fff;
   box-shadow: 0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background: -moz-linear-gradient(top, white, #E0E0E0);
   background: -ms-linear-gradient(top, white, #E0E0E0);
   background: -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow: inset 0 1px 2px #aaa;
   box-shadow: inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
   /* -------------------- */


iar acest cod adăugați-l în locul unde vor fi butoanele

Code
<button class="button" role="button">Îmi place</button>
<button class="button" role="button">Nu-mi place</button>
<button class="button" role="button">De acord</button>
<button class="button" role="button">Mai aștept</button>


Rezultatul:
 
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Diverse » Butoane cu efecte | Aspectul butoanelor | Butonul Descarcă
Căutare:
Copyright © 2019. Toate drepturile rezervate
Politicieni | Acţiunea 2012 | Powered by uCoz