5 Free Ways to Add A Button to WordPress Header

So do you want to increase your site engagement and conversions? Well, adding a button to WordPress Header could be the best and free solution to achieve this. However, Users only click on your button when its look and design seem attractive. In this article, we would be helping you to Add a Button to WordPress Header. Whether you are a coding person or not, We’ve covered both coding and non-coding methods to implement a button to the WordPress header.




Why Should I Add a Button to WordPress Header?

It is very essential to understand the need of adding a button to the WordPress header before proceeding further. Bloggers and internet marketers opted for various techniques to drive visitors to their important pages including discount offer pages, affiliate product pages, and whatnot. The main goal of using any technique is to encourage visitors to click on your special link and land them on the special page.

Exit popups, popup notifications, newsletters, etc are some of the examples. The technique: Add button to WordPress header is one of them. The main advantage of using this strategy is that you don’t have to pay or purchase any plugin in order to use it. An attractive, as well as a noticeable button, could be easily added to the header of your WordPress website with the help of a simple CSS hack.

In most cases, the header button will be visible to the top of the navigation menu bar which makes it stand out and catchy. Further, if you make your header sticky, then this will double up the visibility of the button. As soon as you add a button to the WordPress header, you can use a plugin like MonsterInsights to track the clicks the button would receive.

Adding a button to the WordPress header is different from the menu. Don’t be confused! We have already created a separate article to show the process of adding a button in the WordPress menu.




In a nutshell, you must add a button to WordPress header in the following situations:

  • When you want to use a free marketing strategy to grab the reader’s attention.
  • When you want to redirect users to the affiliate product page as soon as they land on the website
  • When you want to encourage users to call you immediately
  • When you want to notify users about special deals and coupons with the blinking button.

The possibilities are endless.

What are the Best Methods to Add a Button to WordPress Header

Video Tutorial:

For the reader’s convenience, we always create a video tutorial. Either you can watch and learn or simply skip the video and continue with the steps mentioned afterward.

Adding a button to the WordPress header could be possible in two ways:




  • Manually with the help of CSS and HTML
  • OR, with a plugin that helps you to create buttons with a live button builder. Example MaxButtons

Again both methods have their own perks and cons. For example, with the manual CSS method, you have more freedom to customize the button. However, it requires CSS and HTML knowledge for implementing additional effects to the header button.

In the plugin method, the user doesn’t require any prior CSS and HTML knowledge in any kind of way. But still, you have to install an extra plugin to your WordPress site for the sake of installing a button to the header.

Let’s implement both methods…

Method 1: Manual Method to Add Standard Button to WordPress Header

Method 1 Manual Method to Add Standard Button to WordPress Header

In this method, we are going to use an HTML widget to add a standard button in the header then apply CSS code to style it accordingly. Remember this method requires some coding knowledge in order to customize effectively.

You can use the exact code mentioned below. We have also mentioned the additional CSS code in the next sections to allow users to choose from multiple button effects.




Total Time: 5 minutes

Step 1: Add Custom HTML widget to the Header Widget for adding a Button

Step 1 Add Custom HTML widget to the Header Widget for adding a Button

First, we are going to add a button HTML code in the header then style it in the next steps. So, open up the WordPress widgets page by navigating to appearance > widget. Then here you need to drag and drop the custom HTML widget to the header widget. After that insert the below HTML code to the Custom HTML widget you have just added:

<a class=”btn1″ href=”#”>Latest Deals</a>

Now a few things you need to look at it before proceeding further. In the above code, the class name I choose is “btn1” which is unique and will be used as it is when we apply CSS to this button. You can replace it with the other class name if you want. After that, you need to replace “#” with the URL you want to embed to the button. Finally, replace the “Latest deals” with the text you want to use as a label for the header button.
Note: If you want to add more than 1 header button, simply repeat the above code like this:




<a class=”btn1″ href=”#”>Latest Deals</a><a class=”btn2″ href=”#”>Sale Alert</a>

After you are done with adding the HTML button code, tap on the Save button. So this is how you can add button to WordPress Header. Let’s apply CSS styles to the button and make it attractive.

Step 2: Apply CSS styles to the Header button

Step 2 Apply CSS styles to the Header button

Navigate to Appearance > Customize. Then expand the additional CSS option. Here you need to enter the CSS code for the header button. You can exactly copy our CSS code from below and paste it.

@media (min-width:769px) {
.header-widget .btn1{
color: #ffffff;
line-height: 35px;
border-radius: 5px;
background-color: #2B9EB3;
margin:5px;
padding:10px;
}
}

Remember, replace “.header-widget .btn1” with your button class name if you chose a different class name. Else, you will see the CSS styles have been applied to your header button successfully.

Note: The CSS properties such as color, background-color, margin, padding, border-radius, and line-height are adjustable. Also, this button will only appear on screens that are wider or equal to 769px. Again this is also adjustable.

Supply:

  • CSS Code

Tools:

  • CSS Code

Materials: CSS Code

Method 2: Manual Method to Add Blinking Button to WordPress Header

Method 2 Manual Method to Add Blinking Button to WordPress Header

To add a blinking button to the header, you just require to make a small change in the CSS Code. Follow step 1 as it is mentioned in method 1. Then navigate to Appearance > Customize > Additional CSS. After that paste the below CSS code to add button to WordPress header.

@media (min-width:769px) {
.header-widget .btn1{
color: #ffffff;
line-height: 35px;
border-radius: 5px;
margin:5px;
padding:10px;
-webkit-animation: colorchange 1s infinite alternate
}
}
@-webkit-keyframes colorchange {
0% {
background-color: #2B9EB3;
}
50% {
background-color: #2B9EB3;
}
100% {
background-color: #000000;
}
}

Note: Replace “.header-widget .btn1” with your button class name

Method 3: Manual Method to Add Ghost Button to WordPress Header

Method 3 Manual Method to Add Ghost Button to WordPress Header

Ghost buttons are trending. They are different from standard buttons and much more catchy and noticeable. It has a transparent BG with a border. And when you hover on them, the transparent background fills back in.

The below code converts your normal button into a Ghost Button. We have also added a transition property to make it more interesting.

Again follow step 1 mentioned in the first method, and use this CSS code.

@media (min-width:769px) {
	.btn1 {
display: inline-block;
width: 200px;
padding: 8px;
color: #2B9EB3;
border: 2px solid #2B9EB3;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn1:hover,
.btn1:active {
background-color: #2B9EB3;
color: #fff;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
}

Note: Replace “.btn1” with your button class name

Method 4: Manual Method to Add Gradient Button to WordPress Header

Method 4 Manual Method to Add Gradient Button to WordPress Header

Who doesn’t love gradients? No one. Well, you can easily add a gradient button with the below CSS code. Follow step 1 of the first method and then paste this CSS Gradient button code:

You can use the “Gradientbuttons.colorian” website to generate attractive gradient button CSS codes easily.

@media (min-width:769px){
.btn1 {background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%)}
.btn1 {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn1:hover {
background-position: right center; /* change the direction from here */
color: #fff;
text-decoration: none;
}
}

Note: Replace “.btn1” with your button class name

Method 5: Using MaxButtons Plugin to Add Button to WordPress Header

Method 5 Using MaxButtons Plugin to Add Button to WordPress Header

MaxButtons is the trending 5 stars rated button plugin having more than 100,000 active users. The sole purpose of this plugin is to allow users to create a button with the live button editor instead of manual CSS coding. With this tool, you can generate multiple types of buttons including standard buttons, gradient buttons, etc. With the live preview, you can quickly review the changes before onboarding the button to the WordPress header. With the help of the shortcode feature, the user could place buttons anywhere on the WordPress website.

How to Add Button to WordPress Header using MaxButtons Plugin

Step 1: Install MaxButtons Plugin and Activate it

The user has 2 options to install this plugin. Either install it from the WordPress repository or simply download it and upload it.

Step 1 Install MaxButtons Plugin and Activate it

Step 2: Create a Button to Add to WordPress Header

Navigate to MaxButtons > Add New. Now you are at the MaxButtons buttons builder page. On this page, you will see a lot of CSS properties that you can toggle to generate a button for your WordPress header. Also, you will notice the small movable preview window which helps you to create and preview button changes in real-time.

Step 2 Create a Button to Add to WordPress Header

Start with Button name, URL, text, text-color, and toggle each required option. When you are done, simply tap on the Save button to generate a Button shortcode.

Step 3: Copy the button Shortcode

As soon as you save, the MaxButtons plugin will generate a shortcode. Copy it.

Step 3 Copy the button Shortcode

Step 4: Create an HTML button

Now go to Appearance> Widgets. Now here you need to insert an HTML widget into the header widget. Simply tap on the custom HTML widget, select the header option, and tap on the add widget button.

Step 4 Create an HTML button

Step 5: Enter a MaxButtons Shortcode

Enter the MaxButtons shortcode you copied earlier and paste it into the Custom HTML widget inside the header widget. And then click on save.

Step 5 Enter a MaxButtons Shortcode

Step 6: Reload the website

Now just refresh your website page, you will see the exact button in a header you have created a few minutes ago. So this is how you can add button to WordPress header with this plugin.

Step 6 Reload the website

MaxButtons Pros:

  • Simple to use
  • Live button preview option is available
  • Buttons can be added to any location of the website
  • Social icons can also be created
  • No limit on the number of buttons to be created
  • Gradients buttons can be generated
  • All Buttons are responsive

MaxButtons Cons:

  • A blinking Button cannot be created.

Conclusion

This is it. Now you have seen awesome ways to attach a nice attractive button to your WordPress header. What are you waiting for? Implement this today and don’t forget to track its conversions. Otherwise, adding this button to the website would be useless. We highly recommend using MonsterInsights and Custom event tracking techniques for this purpose.

I hope this tutorial helped you to add a button to WordPress Header. If you like this article, please share it with your friends. If you want more blogging tips, follow BlogVwant on FacebookTwitter, and YouTube.

FAQ: Methods to add Button to WordPress Header

Are the above methods working on all websites?

The manual method works on all websites. However, the plugin method only works on WordPress websites.

Should I need to take a backup of my site before proceeding with any of the methods mentioned above?

No. The CSS code would never break or crash your website. No need for backup.

What action should I take if the above methods won’t work on my site?

Tell us about your query in the comment section, we will help you out and guide you to add button to WordPress header correctly.

Comments Rating 0 (0 reviews)




Leave a Reply

Sending

Your subscription could not be saved. Please try again.
Thanks for your Interest. Please check your Inbox to Confirm your Email.

Get An IconCreator Software (Worth $97) for Free

Create an unlimited number of professional icons for free and use them on your blogs or websites without any limit.

 Software is available for both Windows and Mac. 

No terms. Software is 100% free. Just Subscribe to our newsletter to get the software.