Remove blue border from css custom-styled button in Chrome

Question

I'm working on a web page, and I want custom-styled <button> 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 { outline:none } would work, but neither do. Any ideas?

This is what it looks like before being clicked (and how I want it to still look after being clicked):

And this is the border I'm talking about:

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; } 

Answer 1

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;} 

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

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.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;  }    button:focus {outline:0;}

<button class="launch">Launch with these ads</button>   <button class="change">Change</button>