Changing the color of a pressed Bootstrap 4 button

After making changes to the bootstrap css class of the button such as the color, font size, and font color, I noticed that when I click and hold the mouse on the button, the color changes.

Even though I set the color to green, when I click and hold the mouse, it turns blue instead.

Below is the CSS code for the button:

.btn-outline-primary{
  width: 220px;
  background: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:focus{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:active{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

htmlcssbuttonbootstrap-4

Answer №1

To prevent override by bootstrap definition, make sure to add !important to your CSS code.

.btn-outline-primary{
  width: 220px;
  background: #A4D555!important; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}

.btn-outline-primary:focus{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

.btn-outline-primary:active{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>


Your Comment:

Despite the changes, there is still a blue border/outline when clicking or pressing.


Recommendation:

box-shadow: none!important;

Answer №2

Allow me to present my solution:

Upon taking into account your preference for solid buttons in comments, I opted to utilize the btn-primary class designed specifically for solid buttons, rather than the btn-outline class.

.custom.btn-primary{
  width: 220px;
  background-color: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.custom.btn-primary:hover{
  background-color: #A4D555;
  outline: none;
  box-shadow: none;
}

.custom.btn-primary:focus{
  background-color: #A4D555;
  outline: none;
  box-shadow: none;
}

.custom.btn-primary:active{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none;
  outline: none;
}
.custom.btn-primary:active:focus{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary custom">Primary</button>

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

Which terms are acceptable for meta tag titles?

During my studies on w3school, I came across a page that mentioned only the following values are valid: application-name author description generator keywords http://www.w3schools.com/tags/tag_meta.asp However, upon further exploration of webs ...

htmlmeta-tags

Add fresh inline designs to a React high-order component creation

Applying a common HOC pattern like this can be quite effective. However, there are instances where you may not want a component to be wrapped, but rather just extended. This is the challenge I am facing here. Wrapper HOC const flexboxContainerStyles = { ...

javascriptcssreactjs

Root location for offline and pre-production in the Backbone boilerplate router

I am currently utilizing the backbone boilerplate found at https://github.com/tbranyen/backbone-boilerplate My development process involves working on static HTML/JS files offline and conducting tests offline before deploying them to another site for pre- ...

javascripthtmlmodel-view-controllerbackbone.js

"Learn the process of integrating a delete button into your PHP form for the purpose of removing rows from your MYSQL database

Hello, I am embarking on my journey with PHP coding and encountering some challenges. Specifically, I am trying to incorporate a delete button for each row in my code, but unfortunately, it doesn't seem to be functioning as expected. Below is the sn ...

phphtml

Eliminate the table background in a single cell

Apologies if the title is not very descriptive, I couldn't find the right words to use. Below is the table in question. https://i.sstatic.net/LHwbG.png I'm looking to remove the white border (background of the table) from just the upper-left ce ...

css

Attempting to customize react-bootstrap styling within a NextJS application

I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class ...

cssreactjsnext.jsreact-bootstrapbootstrap-5

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

What is the best way to connect an HTML file to a controller in Angular.js?

When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...

javascripthtmlangularjsmodel-view-controllermean-stack

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects ...

htmlcss

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

Navigating within a nested view using Angular's UI-Router

I've encountered a puzzling issue that I've been grappling with for the past three days. It seems like a straightforward problem, but for some reason, it's causing me a lot of trouble. The main parent view in my code contains two child view ...

angularjshtmlionic-framework

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

htmlcssanimation

The PHP script is malfunctioning, specifically due to a condition within a loop

Can anyone provide some assistance? I'm trying to work on a coding task but seem to be stuck. A helpful hint pointing out where I've gone wrong would be greatly appreciated. The task at hand is quite challenging. Currently, I am attempting to ha ...

phphtml

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

jqueryhtmlcssresponsive

Populate select2 with the selected value from select1 without the need to refresh the page or click a button

Being a novice in PHP and Javascript, I am looking for a way to populate the "info" select dropdown based on the selected value from the "peoplesnames" dropdown without refreshing the page or using a button. Here's my code: HTML: <select id="peo ...

javascriptphpjqueryhtmlmysql

Why is the button missing from the codepen?

I attempted to recreate the code from this Codepen link: https://codepen.io/jakaric/pen/mjJQvg However, unlike what you see here (in the run result), the liquid "Pretty little button" is not showing up in my local files. On Codepen, there is no library me ...

javascriptbutton

The left-floated image extends beyond the boundaries of the div

I have a situation where text and an image are combined but the cat image goes outside of the parent div. Is there a solution to this issue? View the code here <div style="border:1px solid #CCCCCC"> <img style="float: left;" src="http://plac ...

htmlcss

The CSS slider is stuck on the fifth slide and won't move past it

I encountered an issue with the CSS slider I am using, as it only had five radio buttons / slides in its demo. After attempting to add more slides, I noticed that the slider was not scrolling to the new slides. I'm unsure where I made a mistake in m ...

htmlcssslideshow