CODEWITHSUNDEEP
htmlcssbootstrap-4
user8402275
user8402275

Reputation:

How can I change the outline colour for my button?

How can I make the blue outline colour be #D5A021 instead of blue when the users clicks on the button?

I think it may have something to do with btn-primary

HTML

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

CSS

.btn-xl {
  padding: 1rem 2rem
}

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #D5A021!important;
}

Upvotes: 5

Views: 15699

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14954

I'm assuming that you are looking to override the default Bootstrap classes. And if that's the case, then the following code will do what you want: 

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.btn-xl {
            padding: 1rem 2rem
        }
        .btn-primary, 
        .btn-primary:hover {
            background-color: #D5A021;
            border-color: #D5A021;
        }
        .btn-primary:active,
        .btn-primary:focus {
            color: #fff;
            background-color: #D5A021 !important;
            border-color: #D5A021 !important;
            box-shadow: 0 0 0 0.2rem rgba(213,160,33, 0.5) !important;
        }
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

It's the box-shadow property that needs to be modified in Bootstrap 4.

Upvotes: 7

Liadco
Liadco

Reputation: 554

You can add CSS outline-color Property, wherever you need it.

For example,

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
  outline-color: #D5A021;
}

Upvotes: 2

Related Questions