How to create css buttons in WordPress with no ShortCodes!

Shortcodes in WordPress are pieces of code that help you embed files or create objects that would normally require lots of complicated, ugly code in just one line.

They were introduced in WP version 2.5 and since then have become one of the most useful features.

When a shortcode is inserted in a WordPress post or page, WordPress will replace it with some other content while displaying the page/post to the reader. In other words, we instruct WordPress to find the macro and replace it with the appropriate dynamic content produced by a PHP function.

For some simple virtual elements such as buttons, Shortcodes may be a little cumbersome. And to kick the ease out of the way, editing existing Shortcode features is not always so friendly.

I know of some really awesome  plugins that add a button to the editor toolbar, which allows you to create a Shortcode via a popup over your content editor.  But then, most of these lack easy access to the configuration window to carry out some changes on already existing Shortcodes.

Creating beautiful CSS buttons without these shortcodes!

If you have been around my blog or have read a couple of articles on this blog, I’m sure one of the things you have come across that probably caught your attention are these buttons.

A couple of my friends on Facebook have asked how I get these objects on my blog posts. Here are some samples;

Help! Listen Here! Log in!

Sample 1  Sample 2 Sample 3 Sample 4

Another Sample Another Sample Again!

More and more samples! Unlimited buttons!

More and More and More!

What about this other button?

Let me end the sample buttons here

These are some pretty buttons right? The beauty is the ease with which to add these buttons to your blog post. Let’s see how to do it!

How to Create CSS buttons without shortcodes!

First, grab this plugin (Forget About Shortcode Buttons or FASC ) and install. That’s the magic behind these beautiful objects.

Be sure to install and activate the plugin. Go to your post editor and locate the icon on your editor toolbar.

create css buttons

Click the icon to popup the button features window. This will help you set the button text, destination url, link target, colors, icons and size.

There are two options to get the popup window;

Option 1: Write down your button text first, select the text and then click the ‘Insert Button‘ icon on the toolbar.

Option 2: Place your mouse cursor where you want the button, then click the ‘Insert Button‘ icon on the toolbar.

The next step is to give your button the desired design and destination url!

wordpress css button editor

Click the ‘icon’ tab on the popup window for a list of icons to chose from. Icons have been organized in categories.

wordpress css button icon

After designing your button, click the ‘Insert’ button at the bottom of the popup window. Your button will instantly be inserted on your post.

What is your button source code?

I took a closer look at each button’s source code. Here is what it looks like;

wordpress css nice buttons

A Cascading Style Sheets (CSS) class selector sets the button size, type, icon, icon position, etc and the style sets the background and text colors.

I don’t want to get into these technical stuff. I’m no expert in css myself. Just want to let you see a bit of what’s inserted on your article.

Editing an existing button!

Like I mentioned above, some shortcode plugins make it really hard to edit already existing shortcode properties.

With FASC, it is quite simple. All you have to do is double-click the button on your text editor. This will popup the options panel allowing you to completely reconfigure the current button.

But please take note!

While FASC is excellent, there is one issue I’ll talk with the developer to try to fix. Well, for me and someone else who feels comfortable editing html tags, this is no big problem.

For most buttons you create, you may want to add the nofollow link attribute but the FASC button options panel does not provide for this. After inserting the button, you will have to switch your content editor to text mode, locate the button code and add the “rel=nofollow” attribute.

That’s it!

Let me know if this is something you’ll like to use on your WordPress blog. If you also have a similar plugin, do let me know in the comment box

37 thoughts on “How to create css buttons in WordPress with no ShortCodes!”

  1. Hello Enstine,

    I am currently using Shortcode Ultimate to create buttons in WordPress. This plugin seems more simple and lightweight. But it’s not updated for the last some months. Will it be a problem?

    Thanks for sharing this tool and tips. Definitely, I will make a try.

    Best wishes,

    Manoj

  2. This plugin is great Enstine,
    I use MaxButton which works with short codes of course, but I know that if I ever stop using it, I’ll have lots of work ahead of me.

    I might just switch to FASC in the future…

  3. Much obliged Enstine for expounding on this cool module. I have begun utilizing it couple of days prior and my experience is incredible. Getting a charge out of it! ?

  4. Hello Enstine,

    Awesome Post Man. I haven’t used buttons on my post. This plugin seems handy and easy to use. I am going to try this out and send you my feedback. Thanks for sharing it.

  5. That’s a really useful plugin for creating buttons. I’m one of those persons who hate to use images for buttons and tend to get it with css. With css3 one can almost accomplish any type of button styles with few lines of code. FASC does the job and the result looks great. Thanks for this useful sharing.

  6. I’m new blogger , so, dont know too much and this one is awesome post , A very informative post for me. Thnx for sharing this.

  7. Adding colourful and customized button in blog increases the attraction of readers. And it’s really great to know that we haven’t to do any coding for creating css buttons in WordPress with the use of ShortCodes.

    I have check out ShortCodes thrice and i can say this is a ultimate solution for us. Thank you so much sir for reviewing this helpful tools along with screenshots and step by step instructions.

    I found this article on kingged.com and become attracted to read full post. I really loved this post πŸ™‚

  8. Are you kidding me sir Enstine? So this stuff could be this easy?!

    Imma be using this on my expert post too and sir, I’m yet to get your take.

    Sam

  9. Hi Enstine,

    Excellent. This FASC tool takes the mess out of adding pretty graphics to your blog posts.

    Thanks for sharing, I’ll certainly tweet this.

    Ryan

  10. Hi Enstine,

    Your post indicates how resourceful this plugin is. I haven’t used it but hope to give it a trial. Though, I felt reluctant in using plugins these days unless absolutely necessary because of speed issue.

  11. Wow wow wow! Enstine teaches us how to create lovely Css buttons. Learnt something from you again bro. Ure a genius.

    Many thanks for sharing πŸ™‚

  12. Hi,

    Editing the code is not everyone’s piece of cake, though many bloggers ultimately learn some of it, the easy method is always accepted.

    Buttons are the real deal, readers feel more comfortable clicking on the button, then on the plain link. Some beautiful buttons over there with CSS styles.

    WordPress is indeed making it simple for every requirement. A very good informative and useful article. Thanks Enstine. Anyway, I found this post on Kingged.

  13. Hi Enstine,

    You mentioned an easy way to add button, and I’m sure not many WordPress users are aware of this option.

  14. Impressive! Hi Enstine, you always seem to simplify most of these technical stuffs with codes! πŸ˜€ This is another of your helpful tutorial. I have learned a lot from this piece.

    The key takeaways for me include: knowledge of what the Forget About Shortcode Buttons or FASC can do, and how to insert the β€œrel=nofollow” attribute manually! Thanks for sharing. Truly, its very helpful!

    I upvoted this post in kingged where it was shared for Internet marketers.
    https://kingged.com/create-beautiful-css-buttons-wordpress-shortcodes/

  15. Nice! again a worth reading tutorial I’m thinking it to install but after reading this tutorial article I’m going to installing…

    Thanks! mate…

    Regards,,,

  16. Hi Enstine,

    Thank you for notifying us with this awesome plugin. Earlier, it was bit of hard and complicated process of adding buttons. But, with this plugin it seems to me that it’s as easy as ABCD.

    Enjoying it! Thanks!

  17. It is a great tutorial. I heard first time about the plugin. Surely I’ll give a try. Thanks for the awesome share.

  18. Great tutorial and a must know for every wordpress users.I am using Maxbuttons right now for creating buttons,will give this a try in future too.

  19. Again an awesome postt Enstine Muki..
    Your blog always manage to provide some very much informative content. πŸ™‚

  20. Nice CSS Buttons there, i love FASC, its great that we no longer required shortcodes. thanks for sharing this useful posts.

    • Really this is one of the best way to create button i had tried some other method by selecting and image and then redirecting that image to an URL but that didn’t work for me now i got this plugin and way how to create button.

      Thanks Enstine Muki for sharing this info

Comments are closed.