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

Опубликовано: 04 Май 2021
на канале: 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
----------------------

Смотрите видео 4 Free Ways to Add A Button to WordPress Header (Without Plugin) онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал BlogVwant - A Vlog for Bloggers 04 Май 2021. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 415 раз и оно понравилось 2 посетителям.

5,376

171