Twitter Bootstrap Question posted in

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

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.

Tags:

3

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

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

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

    Find Bootply Demo HERE

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search