Why is my button changing whenever I press it?


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.

    font-weight: bold;
    margin: 20px;
    padding: 5px;
    background-color: white;
    border-color: black;
    cursor: pointer;
    box-shadow: 5px 6px rgb(0, 0, 0);
    outline: none;

.boton:hover {
    transform: translateY(1px);

.boton:active {
    outline: none;
    padding: 5px;
    transform: translateY(6px);
    box-shadow: none;
    border-radius: none;
    border-color: black;
<!doctype html>
<html lang="en">
    <!-- 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>
     <button class="boton" href="#about">CLICK!</button>


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>

Answered By – George Sun

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published