How to add buttons to articles

joomlaTemplatesYou might like to make links in your articles a bit more clickable, by presenting them as buttons. This can be done using CSS styling, and then adding a class to your link. This article describes how I do it.

Button CSS

We will start by using a CSS generator website.

  1. Browse to
  2. Style your button how you would like it.
  3. Copy the CSS code.
  4. Log into the backend of your Joomla website.
  5. Go to Extensions > Templates.
  6. Edit the custom CSS file for your Template.

Now you can apply this css to some text in an article.

  1. Go to Content > Articles.
  2. Create a New article.
  3. Create some hyperlinked text.
  4. View the article's source code.
  5. Add the following code to your link:
 <a href="/" target="" class="butn">

If you use JCE you can click the Advanced tab on the Link dialog box, and enter butn for the classes field.

Don't forget to flush the cache on your web host as well as your browser.


Thanks for visiting.