Link to be turned into a button:
<a class="MyButton" href="/my_page.php">My Button Text</a>
CSS
a.MyButton, a.MyButton:hover, a.MyButton:visited {
background-color: #F8F8F8;
border: 1px solid #e6e6e6;
border-radius: 4px 4px 4px 4px;
display: inline-block; /*inline-block so width will auto expand if needed*/
min-height: 36px;
min-width: 100px;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
margin-top: 8px;
margin-right: 8px;
margin-left: 0px;
margin-bottom: 8px;
font-size: 13px;
font-weight: normal;
line-height: 16px;
color: #444444;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Align button left / right / center
margin: auto; will not work with an inline-block.
You need to set the text alignment of the containing element to set the alignment, e.g.
$HtmlOutput .= '<div style="text-align:center;"><a class="MyButton" href="/something.php">MY BUTTON TEXT</a></div>
Centre align a group of buttons
Put the buttons inside: <div class=”MyButtonContainer”></div>
.MyButtonContainer {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.