I have been attempting to customize these buttons using my CSS, but unfortunately, they are not reflecting the desired style.
Even after creating new buttons, I encountered the same issue where they did not adhere to the CSS. Upon closer inspection, I noticed that the text was being automatically transformed into uppercase, a feature included in my CSS. This observation makes me question if there is an error somewhere in the code.
<section id="gallery" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<button class="btn active" onclick="filterSelection('all')">Show all</button>
<button type="button" onclick="filterSelection('sealion')">Sea Lions</button>
</div>
.btn {
font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
border-radius: 0;
}
.btn-default {
color: #42DCA3;
border: 1px solid #42DCA3;
background-color: transparent;
}
.btn-default:focus, .btn-default:hover {
color: black;
border: 1px solid #42DCA3;
outline: none;
background-color: #42DCA3;
}
The end goal is for the buttons to be presented as black rectangles with white text and a green border. When a button is hovered over, it should change to a solid green color.