CODEWITHSUNDEEP
csshtmltwitter-bootstrap
gartenkralle
gartenkralle

Reputation: 697

How to change blue outline color of a button when clicked [Bootstrap 4]

If I click the following button a blue outline appears:

<button onclick="window.location.href='/Downloads'" type="button" class="btn btn-lg btn-primary" style="background-color:green;border-color:green">Download</button>

How can I change this color?

Upvotes: 3

Views: 21019

Answers (6)

Andrea
Andrea

Reputation: 1

If you need to change the color

.btn {
outline-color: red;
}

If you need to change the color only when the button is clicked:

btn:active {
color:blue;
}

You can read more here

Upvotes: 0

Schmidko
Schmidko

Reputation: 810

This completely removes the borders from the buttons. (tested with Bootstrap 4)

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

Upvotes: 3

Praveen Murali
Praveen Murali

Reputation: 741

Copy this styles to your CSS file and apply the rgba corresponding to the color you need. Hope this will help. :)

.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 rgba(0, 123, 255, .5);
}

Upvotes: 2

knackdig
knackdig

Reputation: 53

By default, some browsers add a blue outline for accessibility purposes. This is controlled with the "outline" property:

https://www.w3schools.com/cssref/pr_outline.asp

Normally, I remove it and add a border or outline styles for the active state. 

.btn{
  outline: none;
}

.btn:active, .btn:focus{
  border: 1px solid red;
}

Upvotes: 0

Bezlonir
Bezlonir

Reputation: 66

You need to use the active pseudo selector.

btn:active {
  color:blue;
}

https://www.w3schools.com/cssref/sel_active.asp

Upvotes: 0

Sven Eberth
Sven Eberth

Reputation: 3115

.btn {
  outline-color: red;
}

or change it explicitly only when the button is clicked:

.btn:active {
  outline-color: red;
}

Upvotes: 6

Related Questions