Как добавить кнопки на прозрачном фоне на сайт WordPress

Как добавить кнопки на прозрачном фоне на сайт WordPress

Как добавить кнопки на прозрачном фоне на сайт WordPress

Прозрачные кнопки, или как говорят некоторые призрачные кнопки, это те же кнопки для вызова некоего действия, которые очень популярны в эти дни. В статье я покажу вам, как вы можете легко добавить кнопки на прозрачном фоне в вашей теме WordPress, используя очень мало CSS и HTML.

Как добавить кнопки на прозрачном фоне на сайт WordPress

Что такое Кнопка призрак?

Кнопка призрак, это терминология веб-дизайна используемая для прозрачных кнопок, которые сочетаются с фоном и заметны только границы вокруг них.

Создание простого вызова действия кнопки в WordPress не сложная задача. Вы легко можете добавить их в свои посты и страницы без написания сложного CSS или HTML. Так как прозрачные кнопки новый тренд, на данный момент не существует каких — либо конкретных плагинов для создания таких кнопок.

 

Добавление Прозрачной кнопки в WordPress

Как уже упоминалось ранее, вам нужно будет использовать чуть — чуть CSS и HTML , чтобы добавить кнопку призрак в тему WordPres.

Сначала вам нужно добавить следующий код CSS в вашу тему или таблицу стилей дочерней темы.

Найдите файл style.css, а затем вставьте этот фрагмент кода в нижней части файла:

css
.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;
}

Сохраните изменения.

Теперь, когда вы захотите отобразить кнопку, все, что вам нужно сделать, это добавить класс = «ghost-button».

Например, если вы хотите добавить ссылку для загрузки, а затем создать ссылку для скачивания, перейти в редактор текста, чтобы форматировать HTML.

Вставьте код для размещения ссылки на скачивание и добавьте класс CSS следующим образом:

HTML
<a href="http://example.com/downloads/" class="ghost-button"> Загрузить сейчас </a>

Сохраните или обновите свой пост, а затем посмотрите. Вы увидите красивую прозрачную кнопку, вместо простой старой ссылки.

Надеюсь статья помогла вам узнать, Как добавить кнопки на прозрачном фоне на сайт WordPress.

Кнопка на прозрачном фоне

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *