JSFiddle - React, Tailwind, and code Playground

Button Studies

by Jennifer Perrin

HTML

<div class='buttons'>
  <h1>
    Button Studies
  </h1>
  <a class='btn-main btn-main--white' href='#'>
    Save to PayPal Wallet
  </a>
  <a class='btn-main btn-main--blue' href='#'>
    Save to PayPal Wallet
  </a>
</div>

CSS

body {
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fcfdfe));
  background-image: -webkit-linear-gradient(-91deg, #fff 0%, #fcfdfe 100%);
  background-image: linear-gradient(-179deg,#fff 0%, #fcfdfe 100%);
  background-attachment: fixed;
}

.buttons {
  text-align: center;
}

h1 {
  font-weight: 100;
  margin: 80px 40px 40px;
}

a {
  text-decoration: none;
  margin: 9px 10px;
  display: inline-block;
  border-radius: 3px;
  font-family: HelveticaNeue-Medium, sans-serif;
  font-size: 16px;
  padding: 16px 20px 16px 74px;
  position: relative;
}
a::before {
  content: "";
  position: absolute;
  width: 1px;
  top: 9px;
  left: 58px;
  height: 34px;
  background-color: rgba(255, 255, 255, 0.08);
}
a::after {
  content: "Offer Saved";
  position: absolute;
  top: 28px;
  left: 74px;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.btn-main--blue {
  color: #fff;
  background: #FBFEFF;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.1);
  background: url(https://dl.dropboxusercontent.com/u/7364646/pp_m_white.png) 18px 12px/25px 31px no-repeat, -webkit-linear-gradient(-91deg, #009cde 0%, #007BDE 100%);
  background: url(https://dl.dropboxusercontent.com/u/7364646/pp_m_white.png) 18px 12px/25px 31px no-repeat, linear-gradient(-179deg, #009cde 0%, #007BDE 100%);
}
.btn-main--blue:hover {
  background: url(https://dl.dropboxusercontent.com/u/7364646/pp_m_white.png) 18px 12px/25px 31px no-repeat, -webkit-linear-gradient(-91deg, #00a3e8 0%, #007BDE 99%);
  background: url(https://dl.dropboxusercontent.com/u/7364646/pp_m_white.png) 18px 12px/25px 31px no-repeat, linear-gradient(-179deg, #00a3e8 0%, #007BDE 99%);
}
.btn-main--blue:active {
  background: url(https://dl.dropboxusercontent.com/u/7364646/pp_m_white.png) 18px 12px/25px 31px no-repeat, -webkit-linear-gradient(-91deg, #008ac5 0%, #006dc5 99%);
 ...

JavaScript

(function() {
  $('a').click(function() {
    if ($(this).hasClass('success')) {
      $(this).removeClass('success').html('Save to PayPal Wallet');
    } else {
      $(this).addClass('success').html('&nbsp;');
    }
    return false;
  });

}).call(this);