Facebook
From Riv, 8 Years ago, written in CSS.
Embed
Download Paste or View Raw
Hits: 391
  1. .button {
  2.     float: left;
  3.     text-align: center;
  4.     width: 140px;
  5.     padding: 28px 0;
  6.     position: relative;
  7.     margin: 0 15px;
  8. }
  9.  
  10. .o-button {
  11.     position: relative;
  12. }
  13. .button:hover, .o-button:hover {
  14.     cursor: pointer;
  15. }
  16. .button:after {
  17.     bottom: 20px;
  18. }
  19. .o-button:after {
  20.     bottom: 0;
  21. }
  22.  
  23. .button:after, .o-button:after {    
  24.   background: none repeat scroll 0 0 transparent;
  25.   content: "";
  26.   display: block;
  27.   height: 2px;
  28.   left: 50%;
  29.   position: absolute;
  30.   background: #fff;
  31.   transition: width 0.3s ease 0s, left 0.3s ease 0s;
  32.   width: 0;
  33. }
  34. .button:hover:after, .o-button:hover:after {
  35.   width: 100%;
  36.   l