4 Free Ways to Add A Button to WordPress Header (Without Plugin)

Published: 04 May 2021
on channel: BlogVwant - A Vlog for Bloggers

415

So do you want to add a button to the WordPress header, right? We are going to show you 4 different types of buttons that you can add to your WordPress header with the help of CSS and HTML. Visit: https://www.blogvwant.com/add-a-butto...

Note: If you want to learn how to add a button to the Header with a plugin, check out our website article.

00:00 Intro
00:55 Method 1: How to Add Standard Button to WordPress Header
03:20 Method 2: Add Blinking Button to WordPress Header
04:06 Method 3: Adding a Ghost Button to WordPress Header
04:48 Method 4: Adding a gradient button to the WordPress header

CSS Code for Standard Button:

@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.

CSS Code for Blinking Button:

@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

CSS Code for Ghost Button:

@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

Find Customized Gradient Button CSS code from this website:
https://gradientbuttons.colorion.co/

--------------------
Subscribe: / @blogvwantavlogforbloggers
---------------------
Blog: https://www.blogvwant.com
---------------------
Facebook page: / blogvwant
----------------------

Watch video 4 Free Ways to Add A Button to WordPress Header (Without Plugin) online, duration hours minute second in high quality that is uploaded to the channel BlogVwant - A Vlog for Bloggers 04 May 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 415 times and liked it 2 visitors.

5,376

171