Jak dodać przyciski CSS Ghost w twoim motywie WordPress?

Niedawno jeden z naszych czytelników poprosił nas o poradnik, jak dodać przyciski CSS Ghost w swoich motywach WordPress. Przyciski duchy to przezroczyste przyciski wezwania do działania, które są obecnie bardzo popularne. W tym artykule pokażemy, jak można łatwo dodać przyciski-duchy CSS w twoim motywie WordPress przy użyciu bardzo małej ilości CSS i HTML.

Co to jest Ghost Button?

Ghost Button to terminologia używana w projektowaniu stron internetowych w odniesieniu do przezroczystych przycisków, które wtapiają się w tło i są powiadomienie tylko przez obramowanie wokół nich.

Tworzenie zwykłych przycisków wezwania do działania w WordPressie jest dość proste. Możesz nawet dodać je do twoich wpisów i stron bez pisania CSS lub HTML. Ponieważ przyciski duchy są nowym trendem, nie ma specjalnych wtyczek do tworzenia tylko przycisków w stylu duchów.

Dodawanie przycisków duchów w WordPress

Jak wspomniano wcześniej, będziesz musiał użyć odrobiny CSS i HTML, aby dodać przyciski-widma do twojego motywu WordPress.

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

Będziesz potrzebował klienta FTP, aby połączyć się z twoim serwerem WWW. Po połączeniu przejdź do katalogu /wp-content/themes/Your-Theme/ i znajdź 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 w 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 twoje 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ć odnośnik do pobierania, utwórz go w normalny sposób. Następnie przełącz się do edytora tekstu, aby zobaczyć formatowanie HTML.

Znajdź kod HTML dla twojego odnośnika pobierania 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 wpis, a następnie wyświetl jego podgląd. Zobaczysz 111111 piękny przycisk-duch zamiast zwykłego odnośnika.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać przycisk-widmo w twoim motywie WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania przycisków w WordPress bez użycia krótkich kodów

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.