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!