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 całkiem proste. Możesz je nawet dodawać do swoich wpisów i stron bez pisania CSS ani HTML. Ponieważ przyciski „ghost” są nowym trendem, nie ma jeszcze 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 „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/Twój-Motyw/ i znajdź plik style.css. Otwórz ten plik w edytorze tekstu, a następnie wklej ten fragment kodu na dole pliku. (Dowiedz się więcej o wklejaniu fragmentów kodu z sieci w WordPressie).

.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, jakbyś to robił normalnie. 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 „ghost” do swojego 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.