I seem to be having an issue with a button as displayed in this picture:
Does anyone know how to remove the dotted white border that appears on the button when it is focused?
If you need to refer to the online source and CSS + HTML codes, they can be found 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;
}