Иногда нам нужно на сайте оформить ссылку под стандартную кнопку с последующим оформлением. Здесь создадим стандартную кнопку и закрепим к ней ссылку для перехода на интернет ресурс. Где при наведение можно изменить оттенок цвета, это будет один из эффектов, но пока делаем простой дизайн, чтоб украсить или красиво оформить статью, где она будет установлена.
Создавая кнопку, то здесь понадобиться 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);
}
