Remove blue border from css custom-styled button in Chrome

by

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>

More Related Contents:

  1. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  2. How can I force WebKit to redraw/repaint to propagate style changes?
  3. What is a user agent stylesheet?
  4. How to style a select tag’s option element?
  5. See :hover state in Chrome Developer Tools
  6. How to apply specific CSS rules to Chrome only?
  7. :not() selector not behaving the same between Safari and Chrome/Firefox
  8. Is there any “font smoothing” in Google Chrome?
  9. Freeze screen in chrome debugger / DevTools panel for popover inspection?
  10. less.js not working in chrome
  11. Background Image for Select (dropdown) does not work in Chrome
  12. Google chrome a:visited background image not working
  13. Chrome Developer Tools: How to find out what is overriding a CSS rule?
  14. Webkit CSS to control the box around the color in an input[type=color]?
  15. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  16. Font-size issues comparing chrome and Firefox
  17. What does it mean when a CSS rule is grayed out in Chrome’s element inspector?
  18. How do I stop Chrome from yellowing my site’s input boxes?
  19. Chrome renders colours differently from Safari and Firefox
  20. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  21. font-face with wrong MIME type in Chrome
  22. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  23. how to override font boosting in mobile chrome
  24. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  25. Why doesn’t position: sticky work in Chrome?
  26. Font-size
  27. Image moves on hover when changing filter in chrome
  28. Background image not displaying in chrome browser
  29. Combine CSS Attribute and Pseudo-Element Selectors?
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment