<button id="one">I'm a flat cta button</button></br>
<button id="two">I'm a flat cta button</button></br>
<button id="three">I'm a flat cta button</button></br>

body {
  background:#eee;
  text-align:center;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

#one {
  position:relative;
  margin-top:10%;
  background:#fff;
  border:3px solid #055388;
  padding:20px;
  font-size:0.9em;
  color:white;
 
  font-family: 'Open Sans', sans-serif;
  color: #055388;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
  border-radius: 5px;
  
}

#one:hover {
  bottom:4px;
   box-shadow:0px 2px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;
}

#one:active {
  top:4px;
  box-shadow:inset 0px 2px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;
  
  /*bottom:0px;
   box-shadow:0px 0px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;*/
  
}

#two {
  position:relative;
  margin-top:10%;
  background:#fff;
  border:2px solid #055388;
  padding:20px;
  font-size:0.9em;
  color:white;
  font-family: 'Open Sans', sans-serif;
  color: #055388;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
  left:4px;
  top:4px;
  box-shadow: 2px 2px 0px 0px #fff,
              4px 4px 0px 0px #055388;
  
  
}

#two:active {
  bottom:0px;
   box-shadow:0px 0px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;
  
}

#three {
  position:relative;
  margin-top:10%;
  background:#fff;
  border:2px solid #055388;
  padding:20px;
  font-size:0.9em;
  color:white;
 
  font-family: 'Open Sans', sans-serif;
  color: #055388;
  font-weight:600;
  letter-spacing:5px;
  text-transform:uppercase;
  border-radius: 5px;
  
}

#three:hover {
  bottom:2px;
   box-shadow:2px 2px 0px 0px #fff,
              0px 4px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;
}

#three:active {
  top:2px;
  box-shadow:inset 0px 2px 0px 0px #fff,
                    0px 4px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;
  
  /*bottom:0px;
   box-shadow:0px 0px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;*/
  
}