Como Adicionar Botões Fantasma CSS no Seu Tema WordPress

Recentemente, um de nossos leitores nos pediu um tutorial sobre como adicionar botões CSS Ghost em seus temas do WordPress. Botões Ghost são botões transparentes de chamada para ação que são muito populares hoje em dia. Neste artigo, mostraremos como você pode facilmente adicionar botões CSS Ghost em seu tema do WordPress usando muito pouco CSS e HTML.

O que é um Botão Ghost?

Botão Ghost é uma terminologia de design web usada para botões transparentes que se misturam ao seu fundo e só são notáveis pela borda ao redor deles.

Criar botões de chamada para ação normais no WordPress é bastante fácil. Você pode até adicioná-los em suas postagens e páginas sem escrever CSS ou HTML. Como os botões Ghost são uma nova tendência, não há plugins específicos para criar apenas botões no estilo ghost.

Adicionando Botões Ghost no WordPress

Como mencionado anteriormente, você precisará usar um pouco de CSS e HTML para adicionar botões Ghost em seu tema do WordPress.

Primeiro, você precisa adicionar o seguinte código CSS à folha de estilo do seu tema ou tema filho.

Você precisará de um cliente FTP para se conectar ao seu servidor web. Uma vez conectado, vá para a pasta /wp-content/themes/Seu-Tema/ e localize o arquivo style.css. Abra este arquivo para editar em um editor de texto e, em seguida, cole este trecho de código no final do arquivo. (Saiba mais sobre como colar trechos de código da web no 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;
}

Salve suas alterações e faça o upload do arquivo de volta para o servidor.

Agora, sempre que quiser exibir o botão, tudo o que você precisa fazer é adicionar class=”ghost-button”.

Por exemplo, se você quiser adicionar um link de download, crie seu link de download como faria normalmente. Em seguida, mude para o editor de texto para ver a formatação HTML.

Localize o código HTML do seu link de download e adicione a classe CSS assim:

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

Salve ou atualize sua postagem e, em seguida, visualize-a. Você verá um belo botão fantasma em vez de um link simples.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um botão fantasma ao seu tema WordPress. Você também pode querer ver nosso guia sobre como adicionar botões no WordPress sem usar shortcodes

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.