hide the dotted border in css for a button

Question

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

What browser are you using?

John
– John

2014-04-03 19:02:29 +00:00
Commented Apr 3, 2014 at 19:02 — John
– John, Commented Apr 3, 2014 at 19:02
@JohnTobin Mozilla Firefox last version

Farzad
– Farzad

2014-04-03 19:02:49 +00:00
Commented Apr 3, 2014 at 19:02 — Farzad
– Farzad, Commented Apr 3, 2014 at 19:02

Arbel · Accepted Answer · 2014-04-03 19:04:42Z

1

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/

answered Apr 3, 2014 at 19:04

Arbel

31.1k2 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farzad Over a year ago

Thanks dear arbel, just simple mistake it was :D

Collectives™ on Stack Overflow

hide the dotted border in css for a button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related