Mark Greenwood Team : Web Development

CSS only goodness: Part II

Mark Greenwood Team : Web Development

Following on from my previous blog entry CSS only goodness here's a simple solution to buttons with an arrow, controlled by adding a class. The content could be anything you like (an image for example), I've just made it a right angle bracket.:

 

Without right arrow

With right arrow

<style>

button {
  background: #df6c10;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px;
}

button.rarr:after {

  content: ">";
  float: right;
  margin: 0 0 0 10px;
}

</style>

 

<button>Button without right arrow</button>

<button class="rarr">Button with right arrow</button>