Why is my button changing whenever I press it?-CodePudding

Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.

.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>

CodePudding user response：

your problem is caused by bootstrap. add button:focus{outline:none!important}

.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>

CodePudding user response：

Edit: The below solution causes accessibility problems for keyboard users who rely on a visual outline to know where on a page they are focused. Instead, consider adding onclick="this.blur(); to unfocus the button after clicking so that the outline doesn't appear after clicking but still appears when focusing on the button.

<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>

Your problem appears to be fixed by adding outline: none; inline to the button. You have this specified in your CSS but it appears some browsers are overriding your specification.

<button class="boton" href="#about" style="outline: none;">CLICK!</button>