I'm using bootstrap buttons and would like to remove the shadow by creating a new class.
I created a new btn-outline-light-pink class in which I was able to change the color of the button, but I can not 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&0=0&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>
The css is the 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);
}