I am having trouble with my custom-button class not successfully overriding the btn background color property. Can anyone provide insight

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

check out how it looks here

I have attempted adjusting additional button-variant mixin variables without success at changing the outcome.

Answer №1

Give this a go:

$my-unique-color: #00ff00; /* lime green */
.my-customized-button {
    @include button-variant($my-unique-color, darken($my-unique-color, 7.5%), darken($my-unique-color, 10%), lighten($my-unique-color,5%), lighten($my-unique-color, 10%), darken($my-unique-color,30%));
}

@import "../bootstrap-5.0.2/scss/bootstrap";

Alternatively, if you prefer Bootstrap to manage all color variations, simply define the primary color like so:

$primary: #00ff00; /* lime green */
$enable-box-shadows: true;
$prefix: "mo-";

@import "../bootstrap-5.0.2/scss/bootstrap";

For more information, consult the official documentation here: https://getbootstrap.com/docs/5.3/customize/sass/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the world of sass with compound mathematical statements

There's a slight issue that I'd like to circumvent. $var: 30px; font: 25px/25px font,font,font; //Works font: ($var - 5)/($var - 5) font, font, font; //Works not font: ($var - 5px)/($var - 5px) font, font, font; //Works no ...

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

What is preventing window.scrollTo() from being executed?

I have implemented Bootstrap's Buttons plugin to toggle the state of a custom checkbox. When the button is toggled on, a hidden element should appear at the top of the page and then the page should scroll to the top. Similarly, when the button is togg ...

How to Populate Radio Buttons in HTML with Data from a MySQL Database

I am seeking assistance with a PHP and MySQL project since I am new to these technologies. Any help would be greatly appreciated! I have created a second table that contains inventory information. This table includes two columns: Manufacturer and Item. O ...

Tips for creating a div that covers the entire screen and prevents it from resizing

I am facing an issue with a container having the className "container". When I set the height to 100vh like this: .container{ height:100vh } Whenever I resize my screen, such as with dev-tools, the div also shrinks. How can I prevent this? Is it possi ...

The navigation dropdown menu in Bootstrap 4 spills over the edges of the window

In the code snippet provided above, an example of a navbar with a dropdown menu is given. One issue that arises is when the dropdown menu is clicked and it overflows to the right, causing a horizontal scroll bar to appear on the window. The question at ha ...

What are the steps to enable CSS code completion for JavaFX again?

Hello everyone, Recently, I disabled the CSS code completion feature for JavaFX-Tags such as '-fx-...'. Unfortunately, I'm not sure how or why it happened but now I would like to enable the code suggestions again. I have been unable to loca ...

What is the best way to center a div within another div without using the margin tag?

I am struggling to find a way to center a container (div) on my webpage. I've tried various methods like using margin:auto, margin:0 auto;, margin-left:auto;, and margin-right:auto;, but none of them seem to work. Additionally, I'm unsure about ...

The floating filter in ag-Grid for Angular features a dropdown menu styled with Bootstrap

In my ag-grid table, I have a Bootstrap dropDownMenu displayed in CELL and in FLOATING FILTER. The issue arises when the dropdown menu is triggered - it gets hidden in the cell, as shown in the picture. https://i.sstatic.net/xBsPf.png To fix this proble ...

Prevent double-click selection functionality

In my code, I have a CSS class called .noselect that disables text selection using various browser-specific properties. However, I am now looking to modify it so that the text can still be selected, but not when the user double-clicks on it. Is there a wa ...

Host your own website online using your personal computer

So I have created a simple HTML page that I want to publish on the Internet using my PC. This is just for testing purposes, so I don't require a static IP address or high uptimes. First, I installed Tomcat Apache and placed my WAR file in the webapps ...

Preventing default form submission in jQuery: How to cancel it when a certain condition is met

I have a contact form where I validate the input values upon clicking on the submit button. If there is at least one empty input, I trigger an alert and prevent the form submission by using preventDefault. However, if all inputs are filled and submitted, t ...

Ways to transfer a variable from a Node.js script to a JavaScript file on the client side

Seeking guidance on how to transfer the "myBlogs" variable from my Node.js file ("server.js") to a frontend JavaScript file ("blogs.js"). I intend to utilize this variable in the JS file to iterate through the array it contains, generating a template for e ...

Can anyone provide guidance on utilizing libraries within a Chrome extension?

I have been attempting to implement this for a total of 10 hours and I am struggling to make it work in script.js. // Creating a button element const button = document.createElement('button'); button.textContent = 'copy'; button.addEve ...

Tips for creating a hover effect on an icon within a CSS grid

I've just started learning to code and wanted to create a component for previewing/displaying a project I'm working on. I've been attempting to add a hover effect to my links such as the GitHubIcon and LaunchIcon, but so far, it's not w ...

Is it necessary to number each header and paragraph when coding in HTML?

Do I need to write paragraphs as p1, p2, and p3 when using headers like h1, h2, and h3, or can I simply use p? Additionally, which text editor app is recommended for a Macbook? ...

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

I am attempting to create a series of divs that simulate the flipping action of a notecard. Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible. Y ...

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

Having trouble with images not showing up on React applications built with webpack?

Hey there! I decided not to use the create react app command and instead built everything from scratch. Below is my webpack configuration: const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { pa ...