From Gracious Cassowary, 3 Months ago, written in Text.
Embed
  1. .button
  2. {
  3.     background-color:#f2f2f2
  4.     border:none;
  5.     color: #0d0d0d;
  6.     padding:11px 23px;
  7.     text-align:center;
  8.     text-decoration:none;
  9.     display:inline-block;
  10.     font-size:14px;
  11.     margin:4px 2px;
  12.     cursor:pointer;
  13.     border-radius: 8px;
  14. }
  15. .hvr-fade {
  16.   color: #0d0d0d;
  17.   cursor:pointer;
  18.   border-radius: 8px;
  19.   background-color: #f2f2f2;
  20.   padding:11px 23px;
  21.   text-align:center;
  22.   border:none;
  23.   text-decoration:none;
  24.   display: inline-block;
  25.   vertical-align: middle;
  26.   -webkit-transform: translateZ(0);
  27.   transform: translateZ(0);
  28.   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  29.   -webkit-backface-visibility: hidden;
  30.   backface-visibility: hidden;
  31.   -moz-osx-font-smoothing: grayscale;
  32.   overflow: hidden;
  33.   -webkit-transition-duration: 0.3s;
  34.   transition-duration: 0.3s;
  35.   -webkit-transition-property: color, background-color;
  36.   transition-property: color, background-color;
  37. }
  38. .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  39.   background-color:#314d4d;
  40.   color: #f2f2f2;
  41. }
  42.  
  43.  
  44.  
  45. @-webkit-keyframes hvr-wobble-vertical {
  46.   16.65% {
  47.     -webkit-transform: translateY(8px);
  48.     transform: translateY(8px);
  49.   }
  50.  
  51.   33.3% {
  52.     -webkit-transform: translateY(-6px);
  53.     transform: translateY(-6px);
  54.   }
  55.  
  56.   49.95% {
  57.     -webkit-transform: translateY(4px);
  58.     transform: translateY(4px);
  59.   }
  60.  
  61.   66.6% {
  62.     -webkit-transform: translateY(-2px);
  63.     transform: translateY(-2px);
  64.   }
  65.  
  66.   83.25% {
  67.     -webkit-transform: translateY(1px);
  68.     transform: translateY(1px);
  69.   }
  70.  
  71.   100% {
  72.     -webkit-transform: translateY(0);
  73.     transform: translateY(0);
  74.   }
  75. }
  76.  
  77. @keyframes hvr-wobble-vertical {
  78.   16.65% {
  79.     -webkit-transform: translateY(8px);
  80.     transform: translateY(8px);
  81.   }
  82.  
  83.   33.3% {
  84.     -webkit-transform: translateY(-6px);
  85.     transform: translateY(-6px);
  86.   }
  87.  
  88.   49.95% {
  89.     -webkit-transform: translateY(4px);
  90.     transform: translateY(4px);
  91.   }
  92.  
  93.   66.6% {
  94.     -webkit-transform: translateY(-2px);
  95.     transform: translateY(-2px);
  96.   }
  97.  
  98.   83.25% {
  99.     -webkit-transform: translateY(1px);
  100.     transform: translateY(1px);
  101.   }
  102.  
  103.   100% {
  104.     -webkit-transform: translateY(0);
  105.     transform: translateY(0);
  106.   }
  107. }
  108.  
  109. .hvr-wobble-vertical {
  110.   display: inline-block;
  111.   vertical-align: middle;
  112.   -webkit-transform: translateZ(0);
  113.   transform: translateZ(0);
  114.   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  115.   -webkit-backface-visibility: hidden;
  116.   backface-visibility: hidden;
  117.   -moz-osx-font-smoothing: grayscale;
  118. }
  119. .hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  120.   -webkit-animation-name: hvr-wobble-vertical;
  121.   animation-name: hvr-wobble-vertical;
  122.   -webkit-animation-duration: 1s;
  123.   animation-duration: 1s;
  124.   -webkit-animation-timing-function: ease-in-out;
  125.   animation-timing-function: ease-in-out;
  126.   -webkit-animation-iteration-count: 1;
  127.   animation-iteration-count: 1;
  128. }