AR Button Options

by Matthew Day

HTML

<div class="zsimple cf">
  <h4>Default Button Style</h4>
  <div class="bsimple">
    <button>Learn More</button>
  </div>
  <div class="bsimple">
    <div class="nostyle"><a href="#">Learn More</a></div>
  </div>
  <div class="bsimple">
    <input type="button" value="Learn More" />
  </div>
</div>
<div class="zsimple cf">
  <h4>Shared Custom Button Style</h4>
  <div class="bsimple">
    <button class="btn custom1">Learn More</button>
  </div>
  <div class="bsimple">
    <div class="btn custom2"><a href="#">Learn More</a></div>
  </div>
  <div class="bsimple">
    <input class="custom3" type="button" value="Learn More" />
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
}

.zsimple {
  margin-bottom: 30px;
}

h4 {
  color: #666;
  font-weight: 400;
  text-transform: uppercase;
}

.bsimple {
  float: left;
  text-align: center;
  width: 33.3%;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}
.cf:after {
  clear: both;
}

.btn {
  background: thistle;
  color: white;
  padding: 6px 0;
}

a {
  color: inherit;
  display: block; /* This makes entire button area clickable */
  text-decoration: none;
}

JavaScript

// Things to note
// 1) <button> has a border by default which you can override by giving the class a border property. It is also an inline-block by default
// 2) <div> is a block element by default so it expands to fill the width at 100%;
// 3) <input type="button" /> must be targeted specifically as follows to style it
// input[type="button"]