Tworzenie przycisków w widgetach bez użycia wtyczki

Zdarzyło się Wam, że potrzebujecie użyć w widgecie przycisku, a nie posiadacie takiej opcji? Dziś pokażemy Wam, jak szybko stworzyć przycisk bez korzystania z dodatkowych wtyczek. Wystarczy bardzo podstawowa wiedza z CSS i HTML.

Określ miejsce przycisku

Wybierz obszar, w którym możesz umieścić widget (tutaj przeczytasz czym są widgety) np. sidebar. Obszary te mogą się różnić w zależności od motywu, który użyjesz.

Wybierz widget Własny HTML i wpisz w niego następujący kod:

<a class="button-new" href="https://adres strony/">Nazwa przycisku</a>

Skieruj pod właściwy adres

Po https:// umieszczamy adres strony, do której ma prowadzić widget np. https://jdm.pl, a w miejscu „Nazwa przycisku” np. zobacz więcej, skontaktuj się etc.

Dodaj własny CSS

Po zapisaniu widgetu przejdź do sekcji Dostosuj > Dodatkowy CSS.

Tutaj wpisujemy nasz CSS:

.button-new {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   color: #000000;
   font-weight:normal;
   font-size: 18px;
   padding: 16px;
   background-color: #fcb900;
   border: solid #000000 1px;
   text-decoration: none;
   cursor: pointer;
}
.button-new:hover, .button-new:active {
	background-color: #000000;
	color: #fff;
}

O czym mówi nam ten fragment?

border-radius – zaokrąglenie rogów przycisku,
color – kolor napisu na przycisku zapisany w formacie HEX, sześć zer to kolor czarny,
font-weight – „grubość” fontu, wartość np. 600 oznaczy pogrubienie,
font-size – wielkość napisu na przycisku,
padding – odległość pomiędzy tekstem na przycisku a obramowaniem,
background-color – kolor tła przycisku,
border – parametry obramowania, tutaj: obramowanie ciągłe, koloru czarnego i o grubości 1 piksela,
text-decoration – wartość none usuwa nam podkreślenie napisu (linku) w przycisku,
cursor – typ kursora po najechaniu.

Druga część kodu CSS z hover, active – określa nam wygląd przycisku po najechaniu i w momencie kliknięcia. W tym wypadku zmieniamy jedynie kolor tła i kolor napisu.

Po zapisaniu w Dostosuj uzyskamy w widgecie funkcjonalny przycisk. Zmieniając wartości możemy dopasować button do takiego wyglądu, aby pasował nam do designu strony. Miłej zabawy!