Some themes come built in with buttons using shortcodes. This is generally frowned upon in the WordPress community as it creates something called “theme lock” which means if you change your theme, your content will be littered with broken shortcodes instead of your buttons.
For this reason, we suggest using plain HTML and CSS to create buttons on your website. This way you’ll never lose them – they’ll always be buttons.
By default, GeneratePress has a .button
class which you can use to create a button.
<a class="button" href="https://google.com">Button to Google</a>
This button will be designed using the colors and typography in the Customizer.
You can also add your own CSS to style the button.
For example:
.button.sun-flower, .button.sun-flower:visited { background: #F1C40F; color:#FFF; } .button.sun-flower:hover, .button.sun-flower:active { background: #E2B607; color:#FFF; }
If we add that CSS to our site, we can now add a button with those colors like this:
<a class="button sun-flower" href="URL FOR YOUR BUTTON">Your button text</a>
Ghost buttons
Ghost buttons are really popular right now – you’ll see them everywhere including on generatepress.com. They have a transparent background with a border – when you hover, the transparent background fills in.
For example:
.button.ghost, .button.ghost:visited {
background: transparent;
border: 2px solid #FFF;
}
.button.ghost:hover,
.button.ghost:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
}
Gradient buttons
You can also create a gradient button with this CSS:
.button.gradient,
.button.gradient:visited {
border-radius: 5px; /*Adjust accordingly*/
background: rgb(255, 183, 65);
background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
}
.button.gradient:hover,
.button.gradient:active {
background-position: 0;
}
To fine tune the linear gradient, we recommend using this site:
https://cssgradient.io
More button styles
Here’s some more button styles you can add to your CSS:
.button.medium { font-size: 25px; } .button.large { font-size: 35px; } .button.sun-flower, .button.sun-flower:visited { background: #F1C40F; color:#FFF; } .button.sun-flower:hover, .button.sun-flower:active { background: #E2B607; color:#FFF; } .button.orange, .button.orange:visited { background: #F39C12; color:#FFF; } .button.orange:hover, .button.orange:active { background: #E8930C; color:#FFF; } .button.carrot, .button.carrot:visited { background: #E67E22; color:#FFF; } .button.carrot:hover, .button.carrot:active { background: #DA751C; color:#FFF; } .button.pumpkin, .button.pumpkin:visited { background: #D35400; color:#FFF; } .button.pumpkin:hover, .button.pumpkin:active { background: #C54E00; color:#FFF; } .button.alizarin, .button.alizarin:visited { background: #E74C3C; color:#FFF; } .button.alizarin:hover, .button.alizarin:active { background: #DB4334; color:#FFF; } .button.pomegranate, .button.pomegranate:visited { background: #C0392B; color:#FFF; } .button.pomegranate:hover, .button.pomegranate:active { background: #B53224; color:#FFF; } .button.turquoise, .button.turquoise:visited { background: #1ABC9C; color:#FFF; } .button.turquoise:hover, .button.turquoise:active { background: #12AB8D; color:#FFF; } .button.green-sea, .button.green-sea:visited { background: #16A085; color:#FFF; } .button.green-sea:hover, .button.green-sea:active { background: #14947B; color:#FFF; } .button.emerald, .button.emerald:visited { background: #2ECC71; color:#FFF; } .button.emerald:hover, .button.emerald:active { background: #28BE68; color:#FFF; } .button.nephritis, .button.nephritis:visited { background: #27AE60; color:#FFF; } .button.nephritis:hover, .button.nephritis:active { background: #219D55; color:#FFF; } .button.river, .button.river:visited { background: #3498DB; color:#FFF; } .button.river:hover, .button.river:active { background: #2A8BCC; color:#FFF; } .button.ocean, .button.ocean:visited { background: #2980B9; color:#FFF; } .button.ocean:hover, .button.ocean:active { background: #2475AB; color:#FFF; } .button.amethyst, .button.amethyst:visited { background: #9B59B6; color:#FFF; } .button.amethyst:hover, .button.amethyst:active { background: #8D4CA7; color:#FFF; } .button.wisteria, .button.wisteria:visited { background: #8E44AD; color:#FFF; } .button.wisteria:hover, .button.wisteria:active { background: #80399D; color:#FFF; } .button.wet-asphalt, .button.wet-asphalt:visited { background: #34495E; color:#FFF; } .button.wet-asphalt:hover, .button.wet-asphalt:active { background: #263849; color:#FFF; } .button.midnight-blue, .button.midnight-blue:visited { background: #2C3E50; color:#FFF; } .button.midnight-blue:hover, .button.midnight-blue:active { background: #22303F; color:#FFF; } .button.silver, .button.silver:visited { background: #BDC3C7; color:#FFF; } .button.silver:hover, .button.silver:active { background: #ACB2B7; color:#FFF; } .button.concrete, .button.concrete:visited { background: #7F8C8D; color:#FFF; } .button.concrete:hover, .button.concrete:active { background: #6D7B7C; color:#FFF; } .button.graphite, .button.graphite:visited { background: #454545; color:#FFF; } .button.graphite:hover, .button.graphite:active { background: #363535; color:#FFF; }
Learn how to add CSS here.