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.

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

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

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;

}

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.  

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 */

}

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.

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.

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

Back To Top