CODEWITHSUNDEEP
htmlcss
haz14
haz14

Reputation: 19

CSS Change outline colour of button

Pretty new to CSS and i just want to change the defualt outline colour of a button. I beleive im using bootstrap

So far i can change the button colour when the mouse hovers over it, and also the default text colour but not the outline

Ive tried this

.btn-outline-info{
color: #ea4335;
outline-color: #ea4335;
}

the color part works but the outline-color does not

Any help would be appreciated thanks

Upvotes: 1

Views: 5009

Answers (5)

Dat Boi
Dat Boi

Reputation: 683

In CSS it's important to remember that like in HTML and javascript, the computer won't do what you want it to do, it only does what it has to do. It doesn't know what the CSS property outline-colour is, so it does nothing.

Do make an outline of a button, you use border-color: (color). Or you could add a specified border using, border: 3px solid green; there are many changes you can make with borders. To have a full explanation, head to the W3 schools site. https://www.w3schools.com/cssref/pr_border.asp

And then on hover, you could do this, 

button:hover {
  border: 2px dotted blue;
  color: purple; 
}

Also In the future, this kind of question doesn't need a whole discussion on stack overflow, it can be easily researched and troubleshooted!

Cheers

Upvotes: 0

Adam Gonzales
Adam Gonzales

Reputation: 948

This adds the outline style and color on focus:

.btn-outline-info:focus {
  outline-style: solid;
  outline-color: #ea4335;
}

Upvotes: 0

Mike
Mike

Reputation: 411

Try border-color

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.btn-outline-info {
  color: blue;
  border-color: red;
}
.btn-outline-info:hover {
  color: green;
  border-color: purple;
}
</style>

<button class="btn btn-outline-info">Info</button>

Upvotes: 2

Jyle Villagracia
Jyle Villagracia

Reputation: 29

I think you need to add an outline style. For example,

outline-style: solid; outline-color: #92a8d1;

Upvotes: 1

Bryan
Bryan

Reputation: 141

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

:active is when the button is being hovered

Upvotes: 0

Related Questions