text block under buttons

for the engagement strategies space

by Jordan Dayton

HTML

<div id="text-block">
  <div class="body-text">
    <p>Want <strong>YOUR</strong> resource as Featured Content of the Month?</p>
    <p><a href="LINK_TO_DOCUMENT_OF_EXPLANATION" target="_top">FIND OUT HOW!</a></p>
  </div>
</div>

<br />

<div class="wrapper">
  <div class="box">
    <div class="button hvr-box-shadow-inset">Start a Discussion</div>
  </div>
  <div class="box">
    <div class="button hvr-box-shadow-inset">Share a Resource</div>
  </div>
</div>

CSS

#text-block {
  border-radius: 5px;
  height: auto;
  width: 100%;
  background-color: #e5e5e6;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: center;
}

.body-text {
  color: #58585B;
  padding: 3px 20px 3px 20px;
}


/* /////// Bottom Buttons /////// */

.wrapper {
  display: flex;
  text-align: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 3%;
}

.box {
  display: inline-block;
  width: 160px;
  vertical-align: top;
}

.button {
  background-color: #58585B;
  line-height: 40px;
  text-align: center;
  height: 40px;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

div.button:hover {
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  cursor: pointer;
}


/* Box Shadow Inset */

.hvr-box-shadow-inset {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}

.hvr-box-shadow-inset:hover,
.hvr-box-shadow-inset:focus,
.hvr-box-shadow-inset:active {
  box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5), 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}