Links As Buttons With CSS

I’ve recently started working on my home automation web server in earnest, and am trying to give it a nice look and feel. This is made more interesting by the fact that I’m developing a site intende specifically to be consumed by desktops, laptops, tablets and phones alike. With these constraints, it becomes important to have big, juicy click targets for users since there’s nothing more irritating than trying to “click” tiny hyperlinks on a phone.

To do this, I decided that what I wanted was a button. But, I’m using Spring MVC and I want to avoid form submissions for navigation and handle that through hyperlinking. So, after some experimentation, I came up with the following via a composite of things on other sites and my own trial and error tweaking:

/* This is for big content nav buttons */
a.button {
     padding: 5px 10px;
     background: -webkit-gradient(linear, left top, left bottom, from(#CC6633), to(#CC3300));
     background: -moz-linear-gradient(top,  #CC6633,  #CC3300);
     -moz-border-radius: 16px;
     -webkit-border-radius: 16px;
     text-shadow: 1px 1px #666;
     color: #fff;
     height: 50px;
     width: 120px;
     text-decoration: none;
}

table a.button {
    display: block;  
    margin-right: 20px;  
    width: 140px;  
    font-size: 20px;  
    line-height: 44px;  
    text-align: center;  
    text-decoration: none;  
    color: #bbb;  
}

a.button:hover {
     background: #CC3300;
}
a.button:active {
     background: -webkit-gradient(linear, left top, left bottom, from(#CC3300), to(#CC6633));
     background: -moz-linear-gradient(top,  #CC3300,  #CC6633);
}

/* These button styles are for navigation buttons - override the color scheme for normal buttons */
a.headerbutton {
    padding: 5px 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#1FA0E0), to(#072B8A));
    background: -moz-linear-gradient(top,  #1FA0E0,  #072B8A);
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    text-shadow: 1px 1px #666;
    color: #fff;
    height: 50px;
    width: 120px;
    text-decoration: none;
}

Nothing here is really rocket science, but it’s kind of handy to see it all in one place. The main things that I wanted to note were the gradients and border radii to make it look pretty, the webkit/mozilla stuff to make it compatible with versions of browsers not yet supporting HTML 5, shadowing and fixed height/width to complete the button effect.

In terms of client code, I’m invoking this from jsp pages:

	    Say Hello
    	Sample
	

And, that’s about it. Probably old hat for many, but I haven’t done any web development for a while, so this was handy for me, and it’s nice to have as reference. Hopefully, it helps someone else as well.

Edit: Forgot to include the screenshot when I posted this earlier. Here’s the end result (and those are normal a tags):