I'm working on a web page, and I want
custom-styled tags. So with CSS, I said:
border: none. Now it works perfectly in safari, but in chrome,
when I click one of the buttons, it puts an annoying blue border around it. I thought
button:active { outline: none } or button:focus { would work, but neither do. Any ideas?
outline:none }
This is what it looks like before being clicked
(and how I want it to still look after being
clicked):
src="https://i.stack.imgur.com/WVZZe.png"
alt>
And this is the border I'm talking
about:
src="https://i.stack.imgur.com/XwWNF.png" alt="enter image description
here">
Here is my
CSS:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size:
16px;
font-weight: 300;
margin-top: 10px;
margin-right:
10px;
}
button.launch:hover {
cursor:
pointer;
background-color:
#FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right:
10px;
}
button.change:hover {
cursor:
pointer;
background-color:
#F89900;
}
button:active {
outline:
none;
border:
none;
}
No comments:
Post a Comment