Utilizing the bootstrap5 variant-button mixin, I aim to create a custom-colored button. While I have successfully altered the default hover effect color, I am encountering difficulty in setting the background color of the button itself. Upon inspecting the developer tools in the browser, it appears that the background-color property of my custom class is not taking precedence over the default btn class background color.
Snippet from my custom bootstrap scss code
@import "../bootstrap-5.0.2/scss/functions";
@import "../bootstrap-5.0.2/scss/variables";
@import "../bootstrap-5.0.2/scss/utilities";
@import "../bootstrap-5.0.2/scss/mixins";
$my-custom-color: #ffa500; /* orange */
.my-custom-button {
@include button-variant($background: $my-custom-color, $border: $my-custom-color, $color: #fff, $hover-background: darken($my-custom-color, 10%));
}
@import "../bootstrap-5.0.2/scss/bootstrap";
Snippet of my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap-custom.css" />
<title>Navbar</title>
</head>
<body>
<a class="btn my-custom-button">custom button</a>
<script src="bootstrap-5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Result Displayed
I have attempted adjusting additional button-variant mixin variables without success at changing the outcome.