Web_Designer Web_Designer - 6 months ago 16
CSS Question

Unwanted outline or border around button when clicked

I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don't know which). I would like you to show me how I can remove that border. Below is all the code that pertains to the button. I'd appreciate any help you give. Thanks!

The CSS:

button{
border:hidden;
margin-bottom:6px;
background-color:transparent;
font-weight:bold;
text-transform:uppercase;
text-decoration:underline;
cursor:pointer;
outline:none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

button:hover{
background-color:#ADFF2F;
text-decoration:none;}


The HTML:

<button>this is my button</button>

Answer

If you are talking about the dotted line in Firefox, I think what you're looking for is this:

button::-moz-focus-inner { border: 0; }

This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?