Twitter bootstrap .btn class: Button text color changes after being clicked on

Question

I am using twitter bootstrap .btn, .btn-success, etc, classes to style the buttons on a webpage. Everything works great. Except when I click on the button, the button's text color changes, and it won't go back to original color until I click somewhere else on the page. What I would like to do is to avoid the initial text color change when I click on the button. Changing the color when I hover over it, is enough for me. Here is the html code for the button:

<a ui-sref="login" style="outline:none; text-decoration:none; box-shadow:none" class="btn btn-primary btn-outline btn-success btn-tadaa-logout" ng-if="!session.authenticated">Log ind</a>

Thanks in advance.

Answer 1

To retain color after click you need to add following css:

.btn:focus, .btn-success:focus{
      background:#449D44;
    }

Find Bootply Demo HERE

Answer 2

This is because your A:Visited style is overriding the default button text style;

Wrap your <a> tag in another element and style it, e.g. <p class="btn-link"><a class="btn"> and include p.btn-link a:Visted { color:#fff } in your CSS

Answer 3

Wouldn't adding the following fix the issue?:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}