ObiEff ObiEff - 2 months ago 9
CSS Question

Need help for apply style to button

I am using bootstrap and applying a custom theme to it. I have cut the corners on variations of my .btn class using the following css:



.btn-primary {
border:none;
background: linear-gradient(135deg, transparent 7px, rgb(0,130,114) 7px)
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
border:none;
background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px)
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus{
outline:none;
box-shadow:none;
}

<div class="row" style="padding-top:10px">
<input type="submit" class="btn btn-primary col-lg-4 col-lg-offset-4">
</div>





This results in buttons looking like this:

enter image description here

Which is exactly what I want, however when you click on a button it goes back to the original rectangular shape. I have tried the :active, :enabled and :focus pseudo classes but the rectangular shape still appears as in this picture.

enter image description here

What other pseudo classes or elements could be causing this and how can I resolve it.

Answer

Your CSS is being overwritten by bootstrap for the ":active:focus" event.

Include this line of code (below). This will fix your issue.

.btn-primary:active:focus {
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px);
}

Cheers!! Let me know if it worked. I forked your code into my Codepen account and fixed the issue. Here take a look: http://codepen.io/thekamlesh/pen/ZpXgJY