CODEWITHSUNDEEP
htmlcss
luishengjie
luishengjie

Reputation: 187

How to remove outline on circular button when clicked

]]]

How do I remove the blue border around my circular button when I click it.

Upvotes: 4

Views: 5391

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

In this example I have changed the border-color from blue to transparent and added outline:none; on :focus (could also add not enabled)

Hope this helps

button {width:50px;
height:50px;
background-image:url("http://www.rachelgallen.com/images/purpleflowers.jpg");
background-size:70% 70%;
background-repeat:no-repeat;
background-position:center center;
border-width:3px;
border-style: solid;
border-color:#000099;
}
button:focus{
 border-color:transparent!important;
 outline:none;
}
<button>

</button>

Upvotes: 3

Ehsan
Ehsan

Reputation: 12951

Use outline Property : 

selector {

 outline:none;

}

Example :

.btn {

     outline: none;
}
<button class="btn">Click Me!</button>

Upvotes: 1

Related Questions