С помощью стилей ссылку на вашей страничке в html, можно украсить различными способами, например придать ей объем, цвет фона и даже сделать ее анимированной! Таким образом такую ссылку-кнопку будет сложно не заметить и кто-нибудь обязательно заинтересуется, что же она за собой скрывает.
Для начала создадим простую ссылку, которую будем дальше форматировать. Создается она с помощью тега <a> и атрибутом href="путь ссылки". От себя еще добавлю атрибут target="_blank", чтобы при нажатии на ссылку она открывала новое окно в браузере.
<a href="https://example.com/" target="_blank">Моя любимая ссылка</a>
Теперь нужно добавить класс этой ссылке, чтобы не изменять другие, добавим ей уникальный атрибут класс class="mflButton".
<a href="https://example.com/" target="_blank" class="mflButton">Моя любимая ссылка</a>
После этого можно начать играться со стилями этого класса. Добавим в файл стилей этот класс и немного оформления с помощью внутренних отступов (padding) и цвета заднего фона (background-color).
.mflButton {
padding: 8px;
background-color: rgb(84, 246, 216);
}
Но выглядит она все также скудно, неопрятные прямые углы, неподходящий цвет самой ссылки, но зато я придал ей заметности, теперь ее точно не упустить из виду (ввиду своей безобразности).
Теперь закруглим углы и добавим ей объемности, чтобы она выглядела более прилично. Сделать закругленные углы довольно просто, это делается в одну строчку стиля с использованием border-radius и значения, а для того чтобы добавить объемность придется подбирать значения box-shadow и цвет этой тени. Я сделал это следующим образом:
border-radius: 5px;
box-shadow: 2px 3px 0.1px 1px rgb(0, 189, 161);
Немного о box-shadow, чтобы понимать что конкретно произошло. Первые два значения 2px и 3px это сдвиг по осям x и y относительно нашей кнопки. Следующие два значения это рассеивание тени и ее размер. Так как длина рассеивания меньше чем размер, то тень выглядит ровной. Ну и последний это цвет в rgb (потому что в hex, хештеги на зене выглядят странно), который на 20% темнее изначального.
Теперь немного подправим оформление текста. Изменим цвет (color), уберем подчеркивание (text-decoration) и шрифт (font-style).
color: black;
text-decoration: none;
font-family: arial;
Но я обещал еще рассказать о том, как сделать кнопку действительно кнопкой, то есть анимировать ее нажатие. Обычно анимирование объектов ассоциируется с использованием JavaScript, но некоторые элементы можно анимировать просто в css с использованием псевдо-классов. Для этого я использую псевдокласс :hover.
Немного о :hover, это псевдокласс, который реагирует, когда пользователь наводится на элемент курсором. Все просто, когда пользователь наводит курсором на элемент, ему задаются другие прописанные стили. Поэтому мы уменьшим тень (box-shadow) и добавим внешний отступ слева (margin-left), чтобы визуально создавался эффект нажатия.
a.mflButton:hover {
box-shadow: 1px 1.5px 0.1px 0.5px rgb(0, 189, 161);
margin-left: 1px;
}
Так же добавим к нашим классам свойство transition, с помощью которого зададим время за которое наша кнопка будет нажиматься (по умолчанию оно 0s, поэтому такие действия проходят мгновенно).
a.mflButton:hover {
...
transition: 0.3s;
}
.mflButton {
...
transition: 0.3s;
}
На этом все, надеюсь для кого-нибудь этот материал окажется полезным. Спасибо за внимание!