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

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, duration hours minute second in high quality that is uploaded to the channel BlogVwant - A Vlog for Bloggers 12 April 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 1,852 times and liked it 5 visitors.

150