Iconic buttons with just CSS

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

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>