Remove Bootstrap button shadow in :Focus state

Question

Remove Bootstrap button shadow in :Focus state

Asked 6 years ago

Viewed 690 times

2

I am using bootstrap buttons and would like to remove the shadow creating a new class.

I created a new btn-Outline-light-pink class in which I was able to change the button color, but I can’t remove the shadow.

HTML code:

<body class="text-center">

    <script type="text/javascript" language="javascript" src="/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&amp;0=0&amp;0=0"></script>

    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <h3 class="masthead-brand">Arq+</h3>
          <nav class="nav nav-masthead justify-content-center">
            <a class="nav-link" href="#">Home</a>
            <a class="nav-link" href="#">Portfólio</a>
            <a class="nav-link" href="form.html">Fale Conosco</a>
          </nav>
        </div>
      </header>

      <main role="main" class="inner cover">
        <h1 class="cover-heading">Lorem Ipsum</h1>
        <p class="lead">Lorem IpsuLorem IpsuLorem IpsuLorem IpsuLorem Ipsu</p>
        <p class="lead">
          <a href="#" class="btn btn-lg btn-outline-light-pink">Veja o portfólio</a>
          <a href="#" class="btn btn-lg btn-outline-light-pink">Entre em contato</a>
        </p>
      </main>

      <footer class="mastfoot mt-auto">
        <div class="inner">
          <p>Lorem IpsuLorem IpsuLorem IpsuLorem IpsuLorem Ipsu</p>
        </div>
      </footer>
    </div>

    <!-- Desenvolvido por Gabriel Melo -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>

    <!-- Importando JS -->
<script src="bootstrap/js/bootstrap.min.js"></script> 
</body>


</html>

css is bootstrap.css and follows the changed class:

.btn-outline-light-pink {
  color: #f8f9fa;
  background-color: transparent;
  background-image: none;
  border-color: #f8f9fa;
}

.btn-outline-light-pink:hover {
  color: #212529;
  background-color: pink;
  border-color: pink;
}

.btn-outline-light-pink:focus, .btn-outline-light-pink.focus {
  box-shadow: 0 0 0 0.1rem rgba(248, 249, 250, 0.5);
}

.btn-outline-light-pink.disabled, .btn-outline-light-pink:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light-pink:not(:disabled):not(.disabled):active, .btn-outline-light-pink:not(:disabled):not(.disabled).active,
.show > .btn-outline-light-pink.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light-pink:not(:disabled):not(.disabled):active:focus, .btn-outline-light-pink:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light-pink.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

Try box-shadow: none !important;

– Sam

2018/11/16 at 21:38

1 answer

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-11-16T21:50:02+00:00

You have two classes that keep applying the shadow in btn, you have to reset the calories in these classes to work as you expect.

    .btn-outline-light-pink:focus,
    .btn-outline-light-pink.focus {
        box-shadow: 0 0 0 0rem rgba(248, 249, 250, 0.5);
    }

    .btn-outline-light-pink:not(:disabled):not(.disabled):active:focus,
    .btn-outline-light-pink:not(:disabled):not(.disabled).active:focus,
    .show>.btn-outline-light-pink.dropdown-toggle:focus {
        box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
    }

Boy I put all the values of box-shadow: as 0...

See how the final result was

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
        .btn-outline-light-pink {
            color: #f8f9fa;
            background-color: transparent;
            background-image: none;
            border-color: #f8f9fa;
        }

        .btn-outline-light-pink:hover {
            color: #212529;
            background-color: pink;
            border-color: pink;
        }

        .btn-outline-light-pink:focus,
        .btn-outline-light-pink.focus {
            box-shadow: 0 0 0 0rem rgba(248, 249, 250, 0.5);
        }

        .btn-outline-light-pink.disabled,
        .btn-outline-light-pink:disabled {
            color: #f8f9fa;
            background-color: transparent;
        }

        .btn-outline-light-pink:not(:disabled):not(.disabled):active,
        .btn-outline-light-pink:not(:disabled):not(.disabled).active,
        .show>.btn-outline-light-pink.dropdown-toggle {
            color: #212529;
            background-color: #f8f9fa;
            border-color: #f8f9fa;
        }

        .btn-outline-light-pink:not(:disabled):not(.disabled):active:focus,
        .btn-outline-light-pink:not(:disabled):not(.disabled).active:focus,
        .show>.btn-outline-light-pink.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
        }

        body {
            background-color: #999;
        }
    </style>
</head>

<body class="text-center">

    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Arq+</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link" href="#">Home</a>
                    <a class="nav-link" href="#">Portfólio</a>
                    <a class="nav-link" href="form.html">Fale Conosco</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1 class="cover-heading">Lorem Ipsum</h1>
            <p class="lead">Lorem IpsuLorem IpsuLorem IpsuLorem IpsuLorem Ipsu</p>
            <p class="lead">
                <a href="#" class="btn btn-lg btn-outline-light-pink">Veja o portfólio</a>
                <a href="#" class="btn btn-lg btn-outline-light-pink">Entre em contato</a>
            </p>
        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Lorem IpsuLorem IpsuLorem IpsuLorem IpsuLorem Ipsu</p>
            </div>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>