Need A CSS Button On Your Website?
Step 1: Change Theme To Default
Step 2: Go To Appearance – Menus
Step 3: Screen Options
Step 4: Select CSS
Step 5: Type in “Menu – Button”
Step 6: Add CSS To Website
Step 7: Copy CSS Code
Step 8: Go Back To Appearance – Customize
Step 9: Expand CSS
Step 10: Paste Code
/* Give the link some padding and some color */
.fl-page-nav .navbar-nav > li.ss-nav-button {
padding: 10px;
}
.fl-page-nav .navbar-nav > li.ss-nav-button > a {
padding: 5px 18px !important;
color: #ffffff !important;
border-radius: 5px;
background-color: #0f637d;
}
/* Adjust the position for the fixed navigation menu */
.fl-page-header-fixed .fl-page-nav .navbar-nav > li.ss-nav-button > a {
position: relative;
bottom: 6px;
}
/* Give the button a hover & active state */
.fl-page-nav .navbar-nav > li.ss-nav-button > a:active,
.fl-page-nav .navbar-nav > li.ss-nav-button > a:hover {
color: #ffffff !important;
background-color: #196f8c;
}
Step 11: Where it says background color in the code you can change it by adding the desired color.
Step 12: The button will be added to the top menu on your website.
You can call the button whatever you like for it serves as a call to action button, and has the ability to create more conversions. Once this is completed you can change back to you regular theme.
Best Wishes, Coy
About Author
