Style a a href as a button

Question

I'm creating a large set of HTML components that works in every browser (where did the idea started anyway :-) )

Now, I want to have a button, and according to this post on StackOverflow, I should not use a button because that one has a 3D push effect on click. In order to remove that one, the advice was to use a a href and style that to the button I like.

So here's the HTML:

<a href="#" class="button">
    <span>Yes</span>
</a>

And off course, here's the HTML:

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a:active.button {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

Nothing really commplicated

Now, this does all work in Google Chrome and Firefox as this JsFiddle demonstrates.

The button has 3 different states:

• A normal 'default' button.
• A style when you hover on it.
• A style when you click on it.

Now, Internet Explorer does not apply a new style when you click on the button, it's the same style as the one on hovering. Unless you click the border (If you manage to click the border, than the correct style does apply).

Now, why do I have this behaviour and can it be solved as it is crucial to the development of my Control Suite.

I know it's possible to solve with jQuery by adding a removing a class when you click on it, but this seems a very ugly solution and if there's a 'CSS-Friendly' solution, I would like to use that one.

Answer 1

This may be because the CSS selector is backwards:

Change:

a:active.button {

to

a.button:active {

Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<a href="#" class="button">
    <span>Yes</span>
</a>

Edit

The issue appears to be that when you click on the link, you are actually clicking the span and, in IE, the click event is not bubbling. As far as IE is concerned, the anchor is not being :activeated.

You need to take the span out of the anchor:

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<a href="#" class="button">
    Yes
</a>

Edit

If you need the span, then the only solution left is a javascript one.

This block of code adds a mousedown/mouseup event listener to all .button elements which toggles the active class on/off.

// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
    anchors[i].addEventListener("mousedown", function (event) {
        this.classList.add('active');
    }, false);
    anchors[i].addEventListener("mouseup", function (event) {
        this.classList.remove('active');
    }, false);
}

// jQuery
jQuery(document).ready(function($) {
  $('a.button').mousedown(
    function(){
      $(this).addClass('active');
    }
  )
  .mouseup(
    function(){
      $(this).removeClass('active');
    }
  );
});

And we change the :active line of the css to:

a.button:active,
a.button.active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

Which listens to both the :active pseudo-class, as well as the .active class.

//pure JS solution

var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
    anchors[i].addEventListener("mousedown", function (event) {
        this.classList.add('active');
    }, false);
    anchors[i].addEventListener("mouseup", function (event) {
        this.classList.remove('active');
    }, false);
}

//jQuery solution
/*
jQuery(document).ready(function($) {
  $('a.button').mousedown(
    function(){
      $(this).addClass('active');
    }
  )
  .mouseup(
    function(){
      $(this).removeClass('active');
    }
  );
});
*/

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
    <span>Yes</span>
</a>

Answer 2

This seems to be a simple problem of priority... a.button:hover is more accurate than a:active.button so it has precedence. The reason why the browsers don't all behave exactly the same is simply because they handle ties differently.

Making sure that the different pseudo classes are always set at the same level of the selector rule will help counter this problem.

So, this means a:active.button should be switched to a.button:active or the others be switched...