Stilizēta poga "Pievienot materiālu" - uCoz sistēma - Skripti

FORUMA LAPA

Lietotāju sarunas

BUZZ AMATU MEKLĒJUMOS | KONKURSS! IESPĒJA IEGŪT ESKLUZĪVU REKLĀMAS VIETU PORTĀLĀ!

Lappuse 1 no 1
1

Stilizēta poga "Pievienot materiālu"

wuxmachine

Pievienots: Sestdiena, 12.04.07, 21:04 | Ieraksts # 1 Offline

1. Dodamies uz lapu, kurā vēlamies redzēt šo pogu
2. Atveram lappuses HTML redaktoru (

)
3. Atrodam rindiņu:

Code

<?if($ADD_ENTRY_LINK$)?><div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_ENTRY_LINK$">Pievienot rakstu</a> ]</div><?endif?>

4. Kuru aizstājam ar šo:

Code

<?if($ADD_ENTRY_LINK$)?>
       <a href="$ADD_ENTRY_LINK$" class="a-btn">
       <span class="a-btn-text">PIEVIENOT</span>
       <span class="a-btn-slide-text">Jaunu materiālu</span>
       <span class="a-btn-icon-right"><span></span></span>
       </a>
       <div style="padding: 5px; clear: both;"></div>
           <?endif?>

5. Dodamies uz CSS - /panel/?a=tmpl;m=3;t=3
6. Un CSS satura beigās ievietojam šo kodu:

Code

/*  PIEVIENOT MATERIĀLU POGAS SĀKUMS | BUZZ.UCOZ.LV */
.a-btn{
           background: #454545;
           background-image: -webkit-linear-gradient(top,#454545,#343434);
           background-image: -moz-linear-gradient(top,#454545,#343434);
           background-image: -ms-linear-gradient(top,#454545,#343434);
           background-image: -o-linear-gradient(top,#454545,#343434);
           background-image: linear-gradient(top,#454545,#343434);
           padding-left: 20px;
           padding-right: 80px;
           height: 38px;
           width: 110px;
           display: inline-block;
           position: relative;
           border: 1px solid #5d81ab;
           box-shadow:
           0px 1px 1px rgba(255,255,255,0.8) inset,
           1px 1px 3px rgba(0,0,0,0.2),
           0px 0px 0px 4px rgba(188,188,188,0.5);
           -moz-box-shadow:
           0px 1px 1px rgba(255,255,255,0.8) inset,
           1px 1px 3px rgba(0,0,0,0.2),
           0px 0px 0px 4px rgba(188,188,188,0.5);
           -webkit-box-shadow:
           0px 1px 1px rgba(255,255,255,0.8) inset,
           1px 1px 3px rgba(0,0,0,0.2),
           0px 0px 0px 4px rgba(188,188,188,0.5);
           border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
           float: left;
           clear: both;
           margin: 10px 0px;
           overflow: hidden;
           transition: all 0.3s linear;
}
.a-btn-text{
       padding-top: 10px;
       padding-left: 10px;
       display: block;
       font-size: 14px;
       font-face: "Arial";
       white-space: nowrap;
       text-shadow: 0px 1px 1px #000000;
       color: #96a0af;
       font-variant: small-caps;
       font-weight: bold;
}
.a-btn-slide-text{
       position:absolute;
       height: 100%;
       top: 1px;
       right: 52px;
       width: 0px;
       background: #63707e;
       background-image: -webkit-linear-gradient(top,#52606d,#63707e);
       background-image: -moz-linear-gradient(top,#52606d,#63707e);
       background-image: -ms-linear-gradient(top,#52606d,#63707e);
       background-image: -o-linear-gradient(top,#52606d,#63707e);
       background-image: linear-gradient(top,#52606d,#63707e);
       text-shadow: 0px 1px 1px #363f49;
       color: #fff;
       font-size: 9px;
       white-space: nowrap;
       text-transform: uppercase;
       text-align: left;
       text-indent: 10px;
       overflow: hidden;
       line-height: 38px;
       box-shadow:
       -1px 0px 1px rgba(255,255,255,0.4),
       1px 1px 2px rgba(0,0,0,0.2) inset;
       -moz-box-shadow:
       -1px 0px 1px rgba(255,255,255,0.4),
       1px 1px 2px rgba(0,0,0,0.2) inset;
       -webkit-box-shadow:
       -1px 0px 1px rgba(255,255,255,0.4),
       1px 1px 2px rgba(0,0,0,0.2) inset;
       transition: width 0.3s linear;
       font-variant: small-caps;
       font-weight: bold;
}
.a-btn-icon-right{
       position: absolute;
       right: 0px;
       top: 0px;
       height: 100%;
       width: 52px;
       border-left: 1px solid #5d81ab;
       box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
       -moz-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
       -webkit-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
       width: 38px;
       height: 38px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin: -20px 0px 0px -20px;
       background: transparent;
       transition: all 0.3s linear;
}
.a-btn:hover{
       padding-right: 180px;
       box-shadow:
       0px 1px 1px rgba(255,255,255,0.8) inset,
       1px 1px 3px rgba(0,0,0,0.2),
       0px 0px 0px 4px rgba(188,188,188,0.5);
       -moz-box-shadow:
       0px 1px 1px rgba(255,255,255,0.8) inset,
       1px 1px 3px rgba(0,0,0,0.2),
       0px 0px 0px 4px rgba(188,188,188,0.5);
       -webkit-box-shadow:
       0px 1px 1px rgba(255,255,255,0.8) inset,
       1px 1px 3px rgba(0,0,0,0.2),
       0px 0px 0px 4px rgba(188,188,188,0.5);
       text-decoration: none;
       text-shadow: 0px 1px 1px #000000;
}
.a-btn:hover .a-btn-text{
       color: #b5b5b5;
}
.a-btn:hover .a-btn-slide-text{
       width: 125px;
}
/*  PIEVIENOT MATERIĀLU POGAS BEIGAS */

Iznākums:

[table]Neuzvelkot kursoru uz pogas:

Uzvelkot kursoru uz pogas:

[/table]

Pielikumi: 9393587.png (4.1 Kb) · 2269734.png (5.5 Kb)

Stilizēta poga "Pievienot materiālu"

Lappuse 1 no 1
1