Для создания ссылки в виде кнопки в 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>