• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как кнопку сделать ссылкой для сайта в CSS (Как создать кнопку HTML, которая действует как ссылка)
Как кнопку сделать ссылкой для сайта в CSS
Kosten
Дата: Вторник, 2019-09-10, 05:23 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


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

Создавая кнопку, то здесь понадобиться HTML и CSS:

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

Получится такой дизайн кнопки:



HTML

Код
<a href="#" class="knopka">Переход по заданной ссылке</a>

CSS

Код
   .knopka {
    display: inline-block; /* Строчно-блочный элемент */
    background: #284763; /* Темно синий цвет фона */
    color: #fbf6f6; /* Белый цвет текста */
    padding: 15px 20px; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    border-radius: 3px; /* Скругляем уголки */
   }

Сейчас добавим немного элементов, чтоб немного добавить на эту кнопку оформление.

Вот такая кнопка с аналогичной по оформлению идет.



Где добавим обвод и тени.

Код
    border: 2px solid #f7f7f7;
    box-shadow: 1px 1px 10px 4px rgba(19, 17, 17, 0.52), 0px 0px 14px -15px rgba(51, 48, 48, 0.26);


Полный стиль CSS

Код
.knopka {
    display: inline-block;
    background: #284763;
    color: #fbf6f6;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #f7f7f7;
    box-shadow: 1px 1px 10px 4px rgba(19, 17, 17, 0.52), 0px 0px 14px -15px rgba(51, 48, 48, 0.26);
}
Прикрепления: 1749208.png(3.1 Kb) · 0453457.png(7.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как кнопку сделать ссылкой для сайта в CSS (Как создать кнопку HTML, которая действует как ссылка)
  • Страница 1 из 1
  • 1
Поиск: