Iconic buttons with just CSS

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

This post show how to style a link into an iconic button just using CSS. This way the HTML-code remains clean and readable.

Very clean, isn’t it?
The CSS to style it is a bit more complex.

.icon {
  display: block;
  border-radius: 3px;
  color: #FFFFFF;
  font-family: FontAweSome;
  font-size: 20px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  margin: auto;
.facebook {
  background-color: #3B5998;
.facebook:before {
  content : "\f09a";

As you see the .icon class does most of the work for us. It takes care of the A-element to be considered as a block, sizes the button etcetera. The .facebook class only takes care of the background color and the character to be used, You can look up this character in the Font Awesome Cheatsheet.

The implement this in Apex a list is created in which the URL’s to be used are entered. The display text should be the name of the class of the button. The template for the list elements is very simple and clean:

As you see the display text is used to indicate the class of the button.

Happy Apexing

Source Article from http://dickdral.blogspot.com/2014/01/iconic-buttons-with-just-css.html

Leave a Reply