skip to Main Content

Vebsajt dugme “Website button” privlači pažnju korisniku više nego običan dosadni link. Bolje istaknuto dugme će se lakše uočiti i navesti korisnika na akciju. Stoga u našem tekstu objašnjavamo kako stilizovati dugme pomoću CSS-a.

Posetioce vaše veb stranice želite da navedete da preuzmu neki sadržaj, prijave se na vašu poštansku listu ili da dodaju proizvod u korpu.

Boja, veličina, položaj i drugi vizuelni elementi dugmića na veb lokaciji mogu uticati na broj klikova.

Kako stilizovati dugme pomoću CSS-a u WordPress-u

Tri “najbolje prakse” za oblikovanje dugmića

Čitljivost

Mali dugmići sa malim tekstom su teško čitljivi. Generalno najbolje je da se koristi veliko dugme sa velikim fontom i tamnom bojom teksta.

 

Boja

Koristite pozadinsku boju koja odskače od vaše stranice.

Izbor boje fonta koja je u suprotnosti sa bojom dugmeta je još jedan način za dodavanje kontrasta.

 

Oblik

Definisan oblik dugmeta može da poboljša vidljivost i olakša korisniku iskustvo na stranici.

Pomoću CSS mogu se lako napravi dugmići četvrtaste ili zaobljene ivice, različitih debljina ivica i sl.

Dodavanje previše dugmića nije poželjno. Previše dugmića mogu da zbune korisnika.

Generalno, dodavanje jednog glavnog dugmeta po stranici je dobra praksa.

Ne morate da znate mnogo o CSS-u da bi promenili veličinu, oblik, boju ili tekst dugmeta.

 

Dodavanje proizvoljne klase dugmetu u WordPress-u

  1. Nakon dodavanja dugmeta na stranicu, potrebno je dodati ime klase direktno u podešavanju dugmeta “Extra class name” ili “CSS Classes”. Recimo možete dodati u polje “Extra class name”: moje-fensi-dugme
  1. Sačuvati izmene
  2. Istu klasu možete koristiti i dodati više puta tj. na više dugmića
Kako stilizovati dugme pomoću CSS-a u WordPress-u

Kako stilizovati dugme pomoću CSS-a

1. Nakon dodavanja proizvoljnog imena dugmetu, pristupiti “Customizer-u”

  • Nakon logovanja na WordPress sajt kliknuti dugme prilagodi “Customize” (gornji levi ugao) 
  • Kliknuti Dodatni CSS “Additional CSS” – prikazaće vam se veliko tekstualno polje
Kako stilizovati dugme pomoću CSS-a u WordPress-u

2. Stilizovanje dugmeta

Pojaviće vam se uobičajni “kod” tj. komentar sličan ovome

u tekstualnom polju sa leve strane:

 

/*

Welcome to Custom CSS!

 

To learn how this works, see https://wp.me/PEmnE-Bt

*/

 

/* primer komentara, tekst može biti bilo šta */ – ovo je oznaka za višelinijski komentar u CSS-u.

 

Slobodno ga možete obrisati ili dodati svoj po potrebi.

Komentari se koriste obično kada hoćete da naglasite nešto, ili da imate u vidu kako radi, gde ste ga koristili ili čemu služi.

 

3. Copy-and-paste CSS

Da bi dodali svoj stil u CSS, morate ubaciti ime vaše klase i vitičaste zagrade.

 

 /* ne zaboravite da dodate selektor klase, ‘.’ prefiks tačku ispred imena klase */

.moje-fensi-dugme {

            font-size: 16px;  /* visina slova */

            background-color: #ff0000; /* boja pozadine dugmeta */

            border-radius: 16px; /* radijus dugmeta */

            border: 3px solid #00ff00; /* 3px – debljina ivice, solid – vrsta ivice i #00ff00 – boja ivice */

       

         /* može se dodati više različitih svojstva u klasi… */

}

 

/*

:hover označava šta će se desiti dugmetu,

kada mišem pređete preko njega,

u ovom slučaju dugme će postati plavo

*/

 

.moje-fensi-dugme:hover {

            background-color: #0000ff;

}

Kako stilizovati dugme pomoću CSS-a u WordPress-u

4. Selektovanje dodate klase

Vrlo je verovatno da se klasa koju budete dodali dugmetu “moje-fensi-dugme” neće nalaziti tačno u elementu dugmeta, nego u nekoliko nadređenih “parent” elementa iznad.

Zbog toga treba koristiti selektor.

U CSS-u, selektori su obrasci koji se koriste za odabir elemenata koje želite da stilizujete.

Na strani na kojoj se nalazi dugme (u browser-u), desni klik na naše stilizovano dugme pa “Inspect Element“.

Kao što vidimo na slici, klasa “moje-fensi-dugme” je dodata parent elementu “div“, a dugme je označeno plavom linijom “a tag“.

Tag “a” se nalazi tri div-a niže .

Više o CSS tagovima pogledajte ovde.  

Kako stilizovati dugme pomoću CSS-a u WordPress-u

U Customizer-u ćemo zameniti ime klase “.moje-fensi-dugme”

sa “div.moje-fensi-dugme > div > div > a”

 

div.moje-fensi-dugme > div > div > a {

/* moj stil */

}

 

div.moje-fensi-dugme > div > div > a:hover {

/* moj stil */

}

Kako stilizovati dugme pomoću CSS-a u WordPress-u

5. Sačuvaj i objavi “Publish”

CSS se može koristiti za prilagođavanje mnogo različitih elemenata na veb lokaciji, uključujući i dugme.

 

Osnovni CSS stilovi za dugme

Background-color — pozadinska boja, obično prikazana kao heksadecimalan broj, pr: #ff0000 (označava crvena boju)

Heksadecimalane bojew3schools.com/colors/colors_picker.asp

Border — debljina ivica dugmeta, obično prikazana u pikselima.

Border-color —  boja ivice dugmeta, obično prikazana kao heksadecimalan broj.

Color — boja teksta dugmeta, obično prikazana kao heksadecimalan broj.

Padding — razmak izmedju teksta i ivice elementa, obično prikazana u pikselima;

Text-align — poravnanje teksta, može biti levo, desno ili centralno.

Font-size — veličina teksta.

Kako stilizovati dugme pomoću CSS-a u WordPress-u

Ovo je samo osnova menjanja izgleda elementa pomoću CSS-a.

Možete koristiti neki od online generatora za dugme ili druge elemente i iskoristiti generisan stil za vaše fensi dugme.

Najbolji način da se nauči CSS je vežbom i kroz prave primere,  što se više budete igrali sa njim bolje ćete ga razumeti.

Dodatne informacije o CSS-u možete pogledati na sajtu w3schools.

 

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.

Kako stilizovati dugme pomoću CSS-a u WordPress-u

Made by Aleksandar Đurđević – Senior Web Developer @Digitizer