{"id":2506,"date":"2019-12-27T14:29:03","date_gmt":"2019-12-27T14:29:03","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=2506"},"modified":"2025-04-07T21:28:21","modified_gmt":"2025-04-07T20:28:21","slug":"button-from-css","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/button\/button-from-css","title":{"rendered":"Button from css (turn link into a button)"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">Link to be turned into a button:<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;a class=\"MyButton\" href=\"\/my_page.php\"&gt;My Button Text&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\na.MyButton, a.MyButton:hover, a.MyButton:visited {\n  background-color: #F8F8F8;\n  border: 1px solid #e6e6e6;\n  border-radius: 4px 4px 4px 4px;\n  display: inline-block;    \/*inline-block so width will auto expand if needed*\/\n  min-height: 36px;\n  min-width: 100px;\n  padding: .5rem 1rem;\n  margin-top: 8px;\n  margin-right: 8px;\n  margin-left: 0px;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: normal;\n  line-height: 16px;\n  color: #444444;\n  text-align: center;\n  text-decoration: none !important;\n  cursor: pointer;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Align button left \/ right  \/ center<\/h4>\n\n\n\n<p>margin: auto; will not work with an inline-block.<\/p>\n\n\n\n<p>You need to set the text alignment of the containing element to set the alignment, e.g.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$HtmlOutput .= '&lt;div style=\"text-align:center;\"&gt;&lt;a class=\"MyButton\" href=\"\/something.php\"&gt;MY BUTTON TEXT&lt;\/a&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Centre align a group of buttons<\/h4>\n\n\n\n<p>Put the buttons inside: &lt;div class=&#8221;MyButtonContainer&#8221;&gt;&lt;\/div&gt;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.MyButtonContainer {\n  margin-top: 10px;\n  margin-bottom: 10px;\n  \n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Link to be turned into a button: CSS 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. Centre align a group of buttons Put the buttons inside: &lt;div class=&#8221;MyButtonContainer&#8221;&gt;&lt;\/div&gt;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[217],"tags":[],"class_list":["post-2506","post","type-post","status-publish","format-standard","hentry","category-button"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=2506"}],"version-history":[{"count":12,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2506\/revisions"}],"predecessor-version":[{"id":4838,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2506\/revisions\/4838"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=2506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=2506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=2506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}