CSS Animated Button with Offset Border

To div or not to div

The div solution

.primary-button-container {  position: relative;  display: block;  left: 5px;  width: 90px;  margin-top: 30px;  padding: 30px;  border: 2px solid #EBCBAD;  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);}
.primary-button {  display: block;  height: 58px;  width: 82px;  background-color: #EBCBAD;  border: solid #EBCBAD;  border-width: 0 10px;  color: #123440;  font-size: 18px;  margin: -37px 0px -25px -37px;  padding: 15px;  padding-left: 10px;}
.primary-button:active {  transform: translateY(9px) translateX(9px);}
button:focus {  

outline: none;





Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abbey Perini

Abbey Perini

…did someone say animated CSS button?