Zmieniamy wygląd etykiet - 6 propozycji!

Hej! Dzisiejszy post jest o zmianie wyglądu naszych etykiet :) Wcześniejszy post z tej samej serii z wyszukiwarkami macie ->Tu<-.

Przygotowałam dla was 6 propozycji, oczywiście wszelkie parametry można zmieniać.

Kody wpisujemy w Projektant szablonów>zaawansowane>Dodaj arkusz CSS.

.Label a { - Wygląd etykiet przed najechaniem

padding-left: 16px;

background: #000; - tło

padding: 0 14px;

color: #fff!important; - kolor tekstu

border-radius: 0px; - zaokraglenie

-moz-border-radius: 0px;

height: 30px;

line-height: 30px;

text-transform: uppercase;

border-style: solid; - styl ramki

border-width: 1px; - grubość ramki

border-color: #000; - kolor ramki

text-decoration: none;

-webkit-transition: all .3s ease-in-out !important;

t: 30pxt: 30px;

float: left;

margin-left: 5px;

margin-top: 5px;

font-size: 11px; - wielkość liter

text-decoration: none !important;

font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;

letter-spacing: 1px; - przerwy między literami

}

.Label a:hover { - Etykiety po najechaniu

color: #000 !important; - kolor tekstu

background: #fff; - tło

}

1. Czarne

Przed              Po najechaniu

 .Label a {
padding-left: 16px;
background: #000;
padding: 0 14px;
color: #fff!important;
border-radius: 0px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
border-color: #000;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 11px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 1px;
}

.Label a:hover {
color: #000 !important;
background: #fff;

}

2. Truskawkowe

 .Label a {
padding-left: 16px;
background: #ff7f7f;
padding: 0 14px;
color: #fff!important;
border-radius: 0px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
border-color: ff7f7f;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 11px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 1px;
}

.Label a:hover {
color: #ff7f7f !important;
background: #fff;
border-color: #ff7f7f;
}

3. Różowo-czarne

.Label a {
padding-left: 16px;
background: #ffdde4;
padding: 0 14px;
color: #000!important;
border-radius: 100px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 2px;
border-color: #ffdde4;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 11px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 2px;
}

.Label a:hover {
color: #000 !important;
background: #fff;
border-color: #000;
}

4. Kawowe

 .Label a {
padding-left: 16px;
background: #000;
padding: 0 14px;
color: #fff!important;
border-radius: 0px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
border-color: #000;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 11px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 1px;
}

.Label a:hover {
color: #000 !important;
background: #fff;

}

5. Fiolet

.Label a {
padding-left: 16px;
background: #df96fa;
padding: 0 14px;
color: #fff!important;
border-radius: 100px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 3px;
border-color: #df96fa;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 10px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 2px;
}

.Label a:hover {
color: #df96fa !important;
background: #fff;
border-color: #df96fa;
border-style: dashed;
}

6. Błękitne

.Label a {
padding-left: 16px;
background: #9fc5e8;
padding: 0 14px;
color: #fff!important;
border-radius: 2px;
-moz-border-radius: 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
border-style: solid;
border-width: 3px;
border-color: #9fc5e8;
text-decoration: none;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 10px;
text-decoration: none !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
letter-spacing: 2px;
}

.Label a:hover {
color: #9fc5e8 !important;
background: #fff;
border-color: #9fc5e8;
border-style: double;
}

Oryginalny kod pochodzi z Blonparii.

Która propozycja najbardziej wam się spodobała?
Chcecie więcej takich postów?