Update the Bootstrap CSS styling of a button element following a user's click action

Question

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue.

Here is the color I initially selected:

https://i.sstatic.net/DCMq5.png

However, after a click and when the mouse is not hovering over the button, the color changes to blue:

https://i.sstatic.net/jlOtb.png

I have already adjusted most properties as shown below:

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #EB984E;
}
.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:hover {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.buttons input:focus {
  outline: none;
}

What else do I need to do to ensure the entire button remains in this orange color (#EB984E)?

html css bootstrap-4

Answer 1

Answer №1

It seems that you overlooked the :focus pseudo element and focus class in your CSS styling:

.btn-primary:focus,
.btn-primary.focus, {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

Just a heads up, there are a couple of errors in your CSS code where you have used ##EB984E instead of #EB984E.

Adding on, here are some pointers on enhancing button styles for better usability and accessibility:

You're currently applying the same color for hover effect, which should ideally be distinct to signal an active button.
The focus outline color is consistent across buttons, but it's typically recommended to differentiate this to emphasize focus when using a keyboard navigation system.

Your current code works as expected, although I suggest taking into consideration the suggestions mentioned above for your final website deployment :)

.buttoncontainer {
  padding: 20px;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<style>
  .btn:focus,
  .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:hover {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .buttons input:focus {
    outline: none;
  }
</style>

<div class="buttoncontainer">
  <button class="btn btn-primary">One </button>
  <button class="btn btn-primary">Two</button>
  <button class="btn btn-primary">Three</button>
</div>

(Note: The CSS is not displayed in the snippet CSS panel due to being overridden by Bootstrap inclusion.)

Answer 2

It seems that you overlooked the :focus pseudo element and focus class in your CSS styling:

.btn-primary:focus,
.btn-primary.focus, {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

Just a heads up, there are a couple of errors in your CSS code where you have used ##EB984E instead of #EB984E.

Adding on, here are some pointers on enhancing button styles for better usability and accessibility:

You're currently applying the same color for hover effect, which should ideally be distinct to signal an active button.
The focus outline color is consistent across buttons, but it's typically recommended to differentiate this to emphasize focus when using a keyboard navigation system.

Your current code works as expected, although I suggest taking into consideration the suggestions mentioned above for your final website deployment :)

.buttoncontainer {
  padding: 20px;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<style>
  .btn:focus,
  .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:hover {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .buttons input:focus {
    outline: none;
  }
</style>

<div class="buttoncontainer">
  <button class="btn btn-primary">One </button>
  <button class="btn btn-primary">Two</button>
  <button class="btn btn-primary">Three</button>
</div>

(Note: The CSS is not displayed in the snippet CSS panel due to being overridden by Bootstrap inclusion.)

Answer 3

Answer №2

In order to properly style your button with the focus class, ensure that you set both the background-color and border-color to orange. It appears that in your current code, only the box-shadow is set to orange.

Answer 4

In order to properly style your button with the focus class, ensure that you set both the background-color and border-color to orange. It appears that in your current code, only the box-shadow is set to orange.

Answer 5

Answer №3

For an interactive button effect, consider using the :hover selector to apply changes in properties. When hovering over the button, the appearance will transform with new styles, and when not hovering, it will revert to its original state.

.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
  padding:10px 20px;
}

.btn-primary:hover {
  color: blue;
  background-color: red;
  border-color: white;
}

<button class="btn btn-primary">One</button>

Answer 6

For an interactive button effect, consider using the :hover selector to apply changes in properties. When hovering over the button, the appearance will transform with new styles, and when not hovering, it will revert to its original state.

.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
  padding:10px 20px;
}

.btn-primary:hover {
  color: blue;
  background-color: red;
  border-color: white;
}

<button class="btn btn-primary">One</button>

Update the Bootstrap CSS styling of a button element following a user's click action

Answer №1

Answer №2

Answer №3

Similar questions

How can divs be styled to mimic the behavior of tables in IE6 using just CSS and HTML?

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

Switch Tabs with Dropdown Selection

Using jQuery to implement interactive hover effects on individual items within a list

Displaying an Array in HTML using Angular

Drop and drag to complete the missing pieces

Anomalies observed in label transition while in active state for input field

In the thymeleaf fragment, the th:field attribute is marked with a crimson underline

Modifying SVG outline colors using CSS

switch the anchor tag value and send it along with the URL

Tips for filling in the values for the options in a select dropdown menu

Surround the image with horizontal links on each side

Retrieving information from a dynamically generated HTML table using PHP

Attempting to establish a discussion board using MVC 5 on the ASP.NET platform

What is the optimal unit to employ in CSS - percentages or pixels?

The extent of a nameless function when used as a parameter

Overlaying diagonal lines/textures on a gradient or image background

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

Is it possible to determine if a web page is designed for a personal computer or a

What is the formula to determine the precise hue-rotate needed for producing a particular shade?