CODEWITHSUNDEEP
htmlcss
Farzad
Farzad

Reputation: 852

hide the dotted border in css for a button

I have a problem and this is shown in this picture:

How can i remove that dotted white border from out of that button (on focusing in button) ?

enter image description here

The online source and CSS + HTML codes are in HERE : http://jsfiddle.net/TY8qV/

HTML :

<div class="mydesign">
<a href="javascript:void(0)">Test</a>
</div>

CSS :

.mydesign{
/*animation*/
-webkit-animation:240s linear 0s alternate none infinite abr;
   -moz-animation:240s linear 0s alternate none infinite abr;
    -ms-animation:240s linear 0s alternate none infinite abr;
     -o-animation:240s linear 0s alternate none infinite abr;
        animation:240s linear 0s alternate none infinite abr;
float:right;
/*box-shadow*/
-webkit-box-shadow:0px 3px 20px #4C4C4C inset;
   -moz-box-shadow:0px 3px 20px #4C4C4C inset;
        box-shadow:0px 3px 20px #4C4C4C inset;
direction:rtl;
height:140px;
background:#000;
width:770px;
}
.mydesign a{
/*animation*/
-webkit-animation:1s linear 0s alternate none infinite shatel;
   -moz-animation:1s linear 0s alternate none infinite shatel;
    -ms-animation:1s linear 0s alternate none infinite shatel;
     -o-animation:1s linear 0s alternate none infinite shatel;
        animation:1s linear 0s alternate none infinite shatel;
position:relative;
color:rgba(255,255,255,1);
text-decoration:none;
background-color:rgba(219,87,5,1);
font-family:yekan;
font-weight:normal;
font-size:2em;
display:block;
padding:5px;
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
        box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin:30px auto;
width:560px;
text-align:center;
/*transition*/
-webkit-transition:all .1s ease;
   -moz-transition:all .1s ease;
     -o-transition:all .1s ease;
        transition:all .1s ease;
}
.mydesign a:active{
/*box-shadow*/
-webkit-box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
   -moz-box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
        box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position:relative;
top:6px;
}

Upvotes: 0

Views: 283

Answers (1)

Arbel
Arbel

Reputation: 30989

That 'dotted border' is the outline of the a tag on focus or when active.

To remove it, add this to your CSS:

a:active,
a:focus {
  outline: none;
}

Demo http://jsfiddle.net/TY8qV/1/

Upvotes: 1

Related Questions