Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
  • Pagina 1 din 3
  • 1
  • 2
  • 3
  • »
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Diverse » Butoane cu efecte | Aspectul butoanelor | Butonul Descarcă
Butoane cu efecte | Aspectul butoanelor | Butonul Descarcă
StapanulData: Marţi, 2012-06-12, 10:18 AM | Mesaj # 1
Neconectat
 Pasul 1: Panoul de control - Design - Administrarea design-ului (CSS) - adăugaţi acest cod:

Cod
#iconbar li{float:left;position:relative;overflow:hidden;margin-right:10px;background-image:url(http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/linia_1.png);background-size:100% 100%;border:#BFCCEF solid 1px;box-shadow:0 0 10px #BFCCEF;color:#657194}         
         #iconbar a{text-decoration:none;outline:none;display:block;width:48px;cursor:pointer}         
         #iconbar span{width:100px;position:absolute;line-height:110%;font-family:Tahoma;font-size:13px;color:#9099b4;padding-top:5px;text-shadow:1px 1px 0 #FFF}


Pasul 2: Panoul de control - Design - Administrarea design-ului (şabloane) - adăugaţi acest cod în modulul unde doriţi să apară butoanele, între <body> şi </body>:

Cod
<script language="JavaScript" type="text/javascript">         
         $(function(){         
         $(".auserpanel")         
         .hover(function() {         
         $(this).animate({'width': '155'}, "fast");         
         })         
         .mouseleave(function(){         
         $(this).animate({'width': '48'}, "fast");         
         });         
         });         
         </script>


Apoi, pe site, adăugaţi unde vă trebuie unul din codurile de mai jos, ales de Dvs.





Butoanele le puteţi pune împreună, sau schimba imaginea, textul şi adresa cu oricare alta.
 
OmulPaianjenData: Duminică, 2012-08-12, 10:34 AM | Mesaj # 2
Neconectat
 Butoane în stil CSS3

Pasul 1: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugați stilurile:

Cod
.tags {     
     zoom: 1;     
     }     
     .tags:before, .tags:after {     
     content: "";     
     display: table;     
     }     
     .tags:after {     
     clear: both;     
     }     
     .tags li {     
     position: relative;     
     float: left;     
     margin: 0 0 8px 12px;     
     }     
     .tags li:active {     
     margin-top: 1px;     
     margin-bottom: 7px;     
     }     
     .tags li:after {     
     content: '';     
     z-index: 3;     
     position: absolute;     
     top: 10px;     
     right: -2px;     
     width: 5px;     
     height: 6px;     
     opacity: .95;     
     background: #eb6b22;     
     border-radius: 3px 0 0 3px;     
     -webkit-box-shadow: inset 1px 0 #99400e;     
     box-shadow: inset 1px 0 #99400e;     
     }     
     .tags a, .tags span {     
     display: block;     
     -webkit-box-sizing: border-box;     
     -moz-box-sizing: border-box;     
     box-sizing: border-box;     
     }     
     .tags a {     
     height: 26px;     
     line-height: 23px;     
     padding: 0 9px 0 8px;     
     font-size: 12px;     
     color: #555;     
     text-shadow: 0 1px #fff;     
     border-width: 1px 0 1px 1px;     
     border-style: solid;     
     border-color: #dadada #d2d2d2 #c5c5c5;     
     border-radius: 3px 0 0 3px;     
     background-color: #fafafa;     
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f0f0f0));     
     background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);     
     background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);     
     background-image: -ms-linear-gradient(top, #fcfcfc, #f0f0f0);     
     background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);     
     background-image: linear-gradient(top, #fcfcfc, #f0f0f0);     
     -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);     
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);     
     }     
     .tags a:hover {     
     text-decoration: none;     
     }     
     .tags a:hover span {     
     padding: 0 7px 0 6px;     
     max-width: 40px;     
     -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);     
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);     
     }     
     .tags span {     
     position: absolute;     
     top: 1px;     
     left: 100%;     
     z-index: 2;     
     overflow: hidden;     
     max-width: 0;     
     height: 24px;     
     line-height: 21px;     
     padding: 0 0 0 2px;     
     opacity: .95;     
     color: #fff;     
     text-shadow: 0 -1px rgba(0, 0, 0, 0.3);     
     border: 1px solid;     
     border-color: #d15813 #c85412 #bf5011;     
     border-radius: 0 2px 2px 0;     
     background-color: #eb6b22;     
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed7b39), color-stop(100%, #df5e14));     
     background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);     
     background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);     
     background-image: -ms-linear-gradient(top, #ed7b39, #df5e14);     
     background-image: -o-linear-gradient(top, #ed7b39, #df5e14);     
     background-image: linear-gradient(top, #ed7b39, #df5e14);     
     -webkit-transition-property: padding, max-width;     
     -moz-transition-property: padding, max-width;     
     -ms-transition-property: padding, max-width;     
     -o-transition-property: padding, max-width;     
     transition-property: padding, max-width;     
     -webkit-transition: 0.3s ease-out;     
     -moz-transition: 0.3s ease-out;     
     -ms-transition: 0.3s ease-out;     
     -o-transition: 0.3s ease-out;     
     transition: 0.3s ease-out;     
     }     

     .green li:after {     
     background: #65bb34;     
     -webkit-box-shadow: inset 1px 0 #3a6b1e;     
     box-shadow: inset 1px 0 #3a6b1e;     
     }     
     .green span {     
     border-color: #549b2b #4f9329 #4b8b27;     
     background-color: #65bb34;     
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #71ca3f), color-stop(100%, #5aa72e));     
     background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);     
     background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);     
     background-image: -ms-linear-gradient(top, #71ca3f, #5aa72e);     
     background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);     
     background-image: linear-gradient(top, #71ca3f, #5aa72e);     
     }     

     .blue li:after {     
     background: #56a3d5;     
     -webkit-box-shadow: inset 1px 0 #276f9e;     
     box-shadow: inset 1px 0 #276f9e;     
     }     
     .blue span {     
     border-color: #3591cd #318cc7 #2f86be;     
     background-color: #56a3d5;     
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aaeda), color-stop(100%, #4298d0));     
     background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);     
     background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);     
     background-image: -ms-linear-gradient(top, #6aaeda, #4298d0);     
     background-image: -o-linear-gradient(top, #6aaeda, #4298d0);     
     background-image: linear-gradient(top, #6aaeda, #4298d0);     
     }


Pasul 2: Unde aveți nevoie de butoane, adăugați codurile:

Cod
<ul class="tags">    
    [*]<a href="/">Muzică <span>42</span></a></li>
    [/list]    
    <ul class="tags green">    
    [*]<a href="/">Șabloane <span>23</span></a></li>    
    [/list]    
    <ul class="tags blue">    
    [*]<a href="/">Jocuri <span>31</span></a></li>    
    [/list]


Rezultatul:
 
OmulPaianjenData: Duminică, 2012-08-12, 11:38 AM | Mesaj # 3
Neconectat
 Butoane originale în locul celor standard.

Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - la sfârşit adăugăm stilul:

Code

input[type~="submit"],input[type~="button"],input[type~="reset"] {padding:6px 9px 6px 9px; margin:2px; color:#fff; font-weight:bold; background:url('http://fierbinte.ucoz.ro/Forum/Aspect/Forum/Adrese_sus/butonul_verde-negru.png') #4E4E4E; background-position:100% 0px; border:1px solid #2D2D2D; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 0px 1px #fff inset; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; text-shadow:0px -1px 0px #000;}
input[type~="submit"]:hover,input[type~="button"]:hover,input[type~="reset"]:hover {color:#fff; background-position:100% -28px;}
input[type~="submit"]:active,input[type~="button"]:active,input[type~="reset"]:active {color:#fff; background-position:100% -28px; box-shadow:0px 0px 5px #000 inset; -moz-box-shadow:0px 0px 5px #000 inset; -webkit-box-shadow:0px 0px 5px #000 inset;}


Pentru schimbare pe Forum: Panoul de Control - Design - Administrarea design-ului (şabloane) - Forum [Aspectul general a paginilor forumului] - găsiţi codul ce începe de la <?if($USER_LOGGED_IN$)?>(inclusiv) până la $BODY$ şi schimbaţi-l cu:

Code
<?if($USER_LOGGED_IN$)?>
<a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><!--<s3065>--><input type="button" value="Mesaje Private ($UNREAD_PM$)"><!--</s>--></a>
<?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script><bgsound src="http://s54.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>--><input type="button" value="Ultimile postări"><!--</s>--></a>
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>--><input type="button" value="Membrii"><!--</s>--></a>
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>--><input type="button" value="Regulamentul forumului"><!--</s>--></a>
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>--><input type="button" value="Căutare"><!--</s>--></a>
<a class="fNavLink" href="$RSS_LINK$" rel="nofollow"><input type="button" value="RSS"></a> </td>
</tr>
</table>


Rezultatul:
Înainte

După


Pe Forum - Înainte

Pe Forum - După
 
OmulPaianjenData: Miercuri, 2012-08-15, 3:46 PM | Mesaj # 4
Neconectat
 Funcțiile butoanelor: Înainte; Înapoi (pagina precedentă); Reîncărcare pagină; Pagina principală (acasă); Abonare (RSS).

Codul butoanelor:

Code
<a href="javascript:history.back()" title="Înapoi")"><img border="0" src="http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/4_Inapoi.png" style="padding-right:5px"></a><a href="javascript:history.forward()" title="Înainte")"><img border="0" src="http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/4_Inainte.png" style="padding-right:5px"></a><a href="javascript:window.location.reload();" title="Reîncarcă pagina"><img border="0" src="http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/4_Reincarcare.png" style="padding-right:5px"><a href="/" title="Pe prima pagină"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/4_Acasa.png" border="0" style="padding-right:5px"></a><a href="/news/rss" title="RSS"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/4_Rss.png" border="0" style="padding-right:5px"></a>


Rezultatul:
 
OmulPaianjenData: Miercuri, 2012-08-15, 4:41 PM | Mesaj # 5
Neconectat
 Cu ajutorul acestor stiluri, aspectul standard al butoanelor va fi schimbat cu unul mai drăguț. De altfel, schimbând cele două imagini din cod, veți primi aspectul dorit.

Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - la urmă adăugăm stilurile:

Cod
/* Aspectul butoanelor */
input[type~="submit"],input[type~="button"],input[type~="reset"]     
{background: transparent url('http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/5_1.gif');     
border: 1px solid #3b6798;     
color: #fff;     
text-decoration:none;     
text-align:center;     
cursor:pointer;     
padding:5px}     

input[type~="submit"]:hover,input[type~="button"]:hover,input[type~="reset"]:hover     
{text-decoration:none;     
background: transparent url('http://fierbinte.ucoz.ro/Forum/Diverse/Diverse_2/3_butoane/5_2.gif');     
border: 1px solid #3b6798;     
color: #fff;     
text-decoration:none;     
cursor:pointer;     
text-align:center;}


Rezultatul:

Înainte



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