Jak dodać przyciski CSS Ghost do motywu WordPress

Niedawno jeden z naszych czytelników poprosił nas o samouczek, jak dodać przyciski CSS Ghost w swoich motywach WordPress. Przyciski Ghost to przezroczyste przyciski wezwania do działania, które są obecnie bardzo popularne. W tym artykule pokażemy, jak łatwo dodać przyciski CSS Ghost do motywu WordPress, używając bardzo mało CSS i HTML.

Czym jest przycisk Ghost?

Przycisk Ghost to terminologia projektowania stron internetowych używana do opisania przezroczystych przycisków, które wtapiają się w tło i są zauważalne tylko dzięki obramowaniu wokół nich.

Tworzenie zwykłych przycisków wezwania do działania w WordPressie jest dość łatwe. Możesz je nawet dodawać do swoich postów i stron bez pisania CSS lub HTML. Ponieważ przyciski ghost są nowym trendem, nie ma specyficznych wtyczek do tworzenia tylko przycisków w stylu ghost.

Dodawanie przycisków Ghost w WordPressie

Jak wspomniano wcześniej, będziesz potrzebować odrobiny CSS i HTML, aby dodać przyciski typu „ghost” do swojego motywu WordPress.

Najpierw musisz dodać następujący kod CSS do arkusza stylów swojego motywu lub motywu potomnego.

Będziesz potrzebować klienta FTP, aby połączyć się z serwerem internetowym. Po połączeniu przejdź do folderu /wp-content/themes/Your-Theme/ i zlokalizuj plik style.css. Otwórz ten plik do edycji w edytorze tekstu, a następnie wklej ten fragment kodu na dole pliku. (Dowiedz się więcej o wklejaniu fragmentów kodu z sieci do WordPress).

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

Zapisz zmiany i prześlij plik z powrotem na serwer.

Teraz, gdy chcesz wyświetlić przycisk, wystarczy dodać class=”ghost-button”.

Na przykład, jeśli chcesz dodać link do pobrania, utwórz swój link do pobrania tak, jak zwykle. Następnie przełącz się do edytora tekstu, aby zobaczyć formatowanie HTML.

Znajdź kod HTML dla swojego linku do pobrania i dodaj klasę CSS w następujący sposób:

<a href="http://example.com/downloads/" class="ghost-button">Pobierz teraz</a>

Zapisz lub zaktualizuj swój post, a następnie go podglądnij. Zamiast zwykłego linku zobaczysz piękny przycisk ghost.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać przycisk typu „ghost” do Twojego motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania przycisków w WordPressie bez używania krótkich kodów

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz Kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.