The Button:
Button CSS
Go to Theme > Customize > Advanced > Add CSS and add this (you can edit the font, color, background, padding, etc, to your liking):.blog-button {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 20px 0;
}
.blog-button a,
.blog-button a:visited {
color: #fff;
background: #000 !important;
border: 1px solid #000 !important;
line-height: 45px;
padding: 0 20px !important;
display: inline-block;
background-position: 0 !important;
}
.blog-button a:hover {
color: #999;
background: #000 !important;
border: 1px solid #000 !important;
background-position: 0 !important;
}
.blog-button.left {
text-align: left;
}
.blog-button.center {
text-align: center;
}
.blog-button.right {
text-align: right;
} Button HTML
1. Open your post/page in the editor > click on HTML (next to Compose) and add this:<div class="blog-button left">
<a href="LINK">Button</a>
</div> <div class="blog-button center">
<a href="LINK">Button</a>
</div> <div class="blog-button right">
<a href="LINK">Button</a>
</div> If you want the link to open in another window, use this instead:
<div class="blog-button left">
<a href="LINK" target="_blank">Button</a>
</div> <div class="blog-button center">
<a href="LINK" target="_blank">Button</a>
</div> <div class="blog-button right">
<a href="LINK" target="_blank">Button</a>
</div>