Кнопки-ссылки CSS
CSS можно использовать, чтобы сделать HTML-ссылки похожими на кнопки.
Скомбинируйте несколько свойств CSS, таких как background-color, padding, text-decoration и display, чтобы отобразить ссылки в виде блоков или кнопок.
Заполненная кнопка
Ссылка, стилизованная как сплошная красная кнопка, которая темнеет при наведении.
Prompt
HTML-страница, стилизующая ссылку как сплошную кнопку.
Во внутреннем блоке
<style> задайте a:link и a:visited красный фон (#f44336), белый текст, отступ 14px 25px, центрированный текст, без подчёркивания и отображение inline-block. При a:hover и a:active измените фон на красный. Добавьте ссылку в body.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Кнопка с рамкой
Ссылка, стилизованная как кнопка с рамкой, которая заполняется зелёным при наведении.
Prompt
HTML-страница, стилизующая ссылку как кнопку с рамкой, которая заполняется цветом при наведении.
Во внутреннем блоке
<style> задайте a:link и a:visited белый фон, чёрный текст, рамку 2px solid green, отступ 10px 20px, центрированный текст, без подчёркивания и отображение inline-block. При a:hover и a:active задайте зелёный фон и белый текст. Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>