CSS styling the BUTTON, Anchor and INPUT

Published Categorised as Development Tagged ,

When we released version one of the WordPress of works web site, we were using the7 theme from Dream Forest, not my first choice but just because it’s what they thought looked fantastic at the time. On the plus side, anything was better than the god awful CakePHP version, which looked like Moses brought down from the mountain with him along with the ten commandments.

By the time I was involved with the development, the content was pretty much complete and while I plugged away adding the new features to the site as they were requested, one thing really got on my wick more than anything else, and that is … buttons. Combine Contact Form 7, Visual Composer and the7 theme‘s own additions and you have a disaster when it comes to a uniform look across the web site. Let me illustrate what drove me crazy.

When you add a button in Visual Composer, you get this:


Looks fine, and my preferred look (pretend you can’t see the  different fonts, letter spacing and font weight). However, add a poll or Contact Form 7 and the submit button looks like this:



Oh look at the glorious over the top CSS gradients and shadows. It’s a good lesson for “designers” that just because you CAN do something, doesn’t necessarily mean you SHOULD. And I have to ask… what is that shit doing in the flat version of the theme anyway?

Rant over, of course I missed off the graphic buttons we used on the web site all over the place because there was no method for adding them in the backend. So over the entire site, you have three different styles of buttons and no consistency between ANY of them, but luckily not everyone is as anal as I am so no one  noticed or mentioned it.

So when I decided on my own initiative to create a new theme that was more lightweight than the bloated piece of crap that is the7 theme (I can feel another rant coming on about that theme!), it was my dream to have <BUTTON>, <A> and <INPUT> look visually identical in ALL browsers, yes even Internet Explorer 8. Yes I know, but people still use that pile of crap in the company so it has to be supported.

I also wanted to stop using PNG images as buttons as it’s a waste of resources, plus it means myself or the designer would have to do work which don’t have time to do.

a.btn {
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0 .5em;
	border-width: 0;
	background-color: #2980b9;
	color: white;
	text-decoration: none;
	line-height: 2.5em;
	cursor: pointer;
	font-size: inherit;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	box-sizing: border-box;
	word-spacing: normal;
	letter-spacing: normal;

With the CSS done, the HTML is unremarkable.

<a class="btn" href="#">Anchor</a>
<input type="submit" value="Input Submit" />

Hey presto, uniformity with buttons, input and anchors across the web site.

This code as used as the basis for writing an extension plug-in for Visual Composer which allows users to add a kick ass button with FontAwesome support without harassing the poor developer. Or designer, but I’m out of sympathy for designers (Sorry Matt! :)).

Click here to download the zip file

Leave a Reply