8/03/2016

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?

PODPIS

19 komentarzy:

  1. Mi najbardziej spodobała się ostatnia propozycja. Z chęcią zobaczyłabym więcej takich postów! A zrobisz może Back to school?
    Zuzia For Style - KLIK

    OdpowiedzUsuń
  2. Najbardziej podoba mi się pierwsza propozycja <3 uwielbiam czerń i biel.
    http://pktoja.blogspot.com

    OdpowiedzUsuń
  3. Post bardzo przydatny, ja aktualnie nie potrzebuje tych kodów, ale w przyszłości na pewno skorzystam! Zapraszam na mojego bloga, gdzie znajdziesz porady jak wykorzystać drugą szansę mmartnw blog

    OdpowiedzUsuń
  4. Błękitne chyba najbardziej przypadło mi do gustu ;)

    U mnie nowy post, zapraszam!
    MÓJ BLOG
    MÓJ KANAŁ NA YT

    OdpowiedzUsuń
  5. Wszystkie fajne :)

    grlfashion.blogspot.com
    Zapraszam:*

    OdpowiedzUsuń
  6. Wszystkie znam,jednak są zdecydowanie nie dla mnie ;)

    https://strong-power.blogspot.com/

    OdpowiedzUsuń
  7. Wszystkie są bardzo ciekawe :) Pozdrawiam!

    lublins.blogspot.com

    OdpowiedzUsuń
  8. 1 i 2 najlepsze! I jeszcze chciałam podziękować bo szukałam czegoś takiego. Planuje właśnie wstawić etykiety i zmienić ich wygląd :) Przydatny post.
    Anonimoowax - Klik

    OdpowiedzUsuń
  9. Na pewno przydatne, ja akurat nie mam etykiet ;)

    Pozdrawiam
    Sara's City

    OdpowiedzUsuń
  10. czarno białe mi sie podobają

    OdpowiedzUsuń
  11. wszystkie są świetne ;) ja jednak zostanę przy klasyce, pierwsze ;*
    pozdrawiam cieplutko i zapraszam do mnie, będzie mi bardzo miło jeśli zajrzysz, zaobserwujesz xkroljulianx

    OdpowiedzUsuń
  12. O tak! Zapisuje to do zakładek bo ciagle jak chce zrobic zakładki to nie znajduje nic ciekawego i ładnego haha

    OdpowiedzUsuń
  13. I love your blog!
    Do you want to support each other's blog by following each other?:) Please let me know if you do so I can follow you right back x

    xoxo, Nastya

    MY BLOG NASTYA DEUTSCH
    INSTAGRAM

    OdpowiedzUsuń
  14. super propozycje! wygląda to świetnie zazdroszczę takich umiejętności zawsze byłam słaba z htmla :) na pewno przyda się to wielu osobom :)
    pozdrawiam cieplutko myszko :*
    w wolnej chwili zapraszam do siebie ♡
    ayuna-chan.blogspot.com

    OdpowiedzUsuń
  15. świetny pomysł i bardzo przydatna notka :)
    http://karik-karik.blogspot.com/

    OdpowiedzUsuń
  16. Bardzo fajna lekcja, dla mnie to czarna magia :)

    Zapraszam do wspólnej obserwacji :)
    http://theloth.blogspot.com/

    OdpowiedzUsuń
  17. Najbardziej podobają mi się fioletowe :)
    Pozdrawiam ;* #Smile
    Nasz blog - klik ♥

    OdpowiedzUsuń

→ Napisz coś więcej niż "Zapraszam do mnie"
→ Na każdy blog wchodzę :) Ale niekoniecznie zostawiam komentarz!
→ Usuwam komentarze typu "Obs za Obs"
→ Dziękuje za każdy szczery komentarz ♥