37

How to create css buttons in WordPress with no ShortCodes!

WP Rocket - WordPress Caching Plugin

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

Web Hosting Siteground Wins the race. Make no mistakes about it !

Siteground has been voted the best WordPress and Website Hosting of 2019 by top WordPress bloggers and Webmasters. See details of survey or visit Siteground here

Enstine Muki
 

Certified Cryptocurrency Expert, Problogger and Serial Entrepreneur

karan

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

    Enstine Muki

    Good to know you have it and it’s working for you Karan!
    Good luck bro

    Suprabhat Mondal

    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

Ahmad Naeem

I personally Used It Really awesome and simple Buttons
Easy to use,simple steps to add it
Thanks for sharing nice information to other

    Enstine Muki

    Hey Ahmad,
    Thanks for sharing your experience and good luck to you as well

mayank

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

    Enstine Muki

    Thank you Mayank for being part of this community πŸ˜‰

Rahul Patel

wow again an awesome article Enstine muki. Very helpful post for those who use wordpress

Gautam

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.

    Enstine Muki

    I have head of MaxButtons but never used that before. I may have to take a greater look into it later.

    Thanks for mentioning

Atish Ranjan

Thanks Enstine for writing about this cool plugin. I have started using it few days ago and my experience is great. Enjoying it! πŸ™‚

    Enstine Muki

    That’s good to hear you have great experience with it πŸ˜‰
    Thanks for sharing it with us here

Lakhyajyoti

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

Sayantan Mahato

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!

Virendar Warwal

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,,,

Sunday

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/

    Enstine Muki

    Great to see you around Sunday and thanks for the beautiful comment. Hope you are having a wonderful weekend

Pankaj

Hi Enstine,

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

Rohan Bhardwaj

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.

Babs

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 πŸ™‚

decoslim

Thanks for sharing. as usual i find your blog interesting to read

aceclue

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.

Ryan Biddulph

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

Ross

Hey Enstine thanks a lot for featuring our plugin great post :))

    Enstine Muki

    Good to see you here Ross πŸ˜‰
    I’m glad your plugin is working for me

    Are you going to add the dofollow/nofollow option in the next update?

Sam Adeyinka

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

Amit kumar

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 πŸ™‚

Kamal

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.

Valli Pandy

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.

Ankit Solanki

I am new blogger and it helps me to get the icons without shortcodes.
Thanks for sharing information

Vishwajeet Kumar

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.

    Enstine Muki

    This plugin adds beauty to your posts man. I look forward to your feedback from using it πŸ˜‰

Purnendu Das

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! ?

Nikola Roza

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…

Manoj

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

Priyanshu Bansal

Great Plugins ! I had never used this type of plugins.
Thank you for this post

Ivaylo Durmonski

Thanks for the tips! Do you know if these same techniques work in the new editor Gutenberg? Thanks!

Comments are closed