#html #css
Вопрос:
Всякий раз, когда я нажимаю кнопку, она меняет свой радиус и добавляет белую линию под полем. Идея состоит в том, что кнопка остается в той же форме, что и раньше, единственное отличие должно заключаться в том, что тень исчезает так, как она уже исчезает.
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
cursor: pointer;
border-radius:none;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(1px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Ответ №1:
Изменить: Приведенное ниже решение вызывает проблемы с доступом для пользователей клавиатуры, которые полагаются на визуальный контур, чтобы знать, на какой странице они сосредоточены. Вместо этого подумайте о том, чтобы добавить onclick="this.blur();
расфокусировку кнопки после нажатия, чтобы контур не появлялся после нажатия, но все еще появлялся при фокусировке на кнопке.
<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>
Ваша проблема, по-видимому, устранена путем добавления outline: none;
встроенного в button
. Это указано в вашем CSS, но, похоже, некоторые браузеры переопределяют вашу спецификацию.
<button class="boton" href="#about" style="outline: none;">CLICK!</button>
Комментарии:
1. Имейте в виду, что удаление
outline
нарушает многие правила доступности и может затруднить использование вашего сайта людьми с определенными нарушениями.2. Отличная мысль. Как насчет добавления
onclick="this.blur();
, чтобы контур все еще мог отображаться в фокусе, но не появлялся после щелчка?
Ответ №2:
ваша проблема вызвана загрузкой. кнопка добавления:фокус{контур:нет!важно}
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(10px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
background-color:black;
}
button:focus{
outline:none!important;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Комментарии:
1. Тьфу, вот почему я предпочитаю не использовать Bootstrap. Он думает, что это так
!important
… 😉