Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Услуги интернет-маркетолога для вашего бизнеса. Анализ рынка, подбор стратегии и команды, увеличение продаж и узнаваемости бренда.

от 29500 

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Ссылка как кнопка css

Для создания ссылки в виде кнопки в CSS, можно использовать несколько свойств CSS. Например, можно указать рамку, фоновый цвет, шрифт, цвет текста и т.д. Для создания кнопки-ссылки в CSS, используйте следующий код:

a.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: #008CBA;
  color: #FFF;
  border-radius: 3px;
  border: 2px solid #008CBA;
  cursor: pointer;
}

a.button:hover {
  background-color: #FFF;
  color: #008CBA;
}
  • display: inline-block — свойство, указывающее, что элемент должен отображаться как блочный элемент, но без разрыва строки после этого элемента.
  • padding — отступ внутри элемента, заданный в пикселях.
  • font-size — размер шрифта.
  • font-weight — толщина шрифта.
  • text-align — выравнивание текста внутри элемента.
  • text-decoration — стиль подчеркивания ссылки (здесь установлено значение none для удаления стандартного подчеркивания ссылки).
  • background-color — цвет фона кнопки.
  • color — цвет текста кнопки.
  • border-radius — радиус скругления углов у кнопки.
  • border — задание рамки у кнопки (2px — толщина рамки, solid — стиль рамки, #008CBA — цвет рамки).
  • cursor — тип курсора при наведении на кнопку.

Для изменения стилей при наведении на кнопку, используется псевдокласс :hover. В этом примере заданы новые значения для background-color и color при наведении на кнопку.

Чтобы создать кнопку-ссылку, добавьте к элементу ссылки класс button, например:

<a href="#" class="button">Кнопка-ссылка</a>
Поделиться:

Комментарии

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

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

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.