How to Add a Button to WordPress Menu | Standard & Blinking Button | Using CSS | Manual Coding

Published: 12 April 2021
on channel: BlogVwant - A Vlog for Bloggers
1,852
5

So do you want to add a button to WordPress Menu, right? We will show you 2 practical methods to put a standard as well as an attractive blinking button on your WordPress menu. More details: https://www.blogvwant.com/add-a-butto...

00:00 Introduction
00:43 Method 1: Add Standard Button to WordPress Menu
02:43 Method 2: Add Blinking Button to WordPress Menu


Method 1: Standard Menu Button CSS Code

Note: Replace the nav-button in the below code if you have mentioned the different “CSS class name” for your menu item which you wanted to convert into a button.


@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a{
color: #ffffff;
line-height: 35px;
border-radius: 5px;
background-color: #000000;
}
}

Method 2: Blinking Menu Button CSS Code

Note: Remember if your menu item CSS class name is different, then make sure to replace it with nav-button

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
color: #ffffff;
line-height: 35px; /*this number will likely need to be adjusted*/
border-radius: 5px;
-webkit-animation: colorchange 1s infinite alternate
}
}
@-webkit-keyframes colorchange {
0% {
background-color: #f16334;
}

50% {
background-color: #f16334;
}
100% {
background-color: #000000;
}
}



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


Watch video How to Add a Button to WordPress Menu | Standard & Blinking Button | Using CSS | Manual Coding online without registration, duration hours minute second in high quality. This video was added by user BlogVwant - A Vlog for Bloggers 12 April 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,852 once and liked it 5 people.