[css] 123

Viewer

  1. $color-bluish: #06c8d9;
  2.  
  3. :root {
  4.   font-size: 16px;
  5.   font-family: 'Ubuntu', sans-serif;
  6. }
  7.  
  8. html,
  9. body,
  10. .row {
  11.   height: 100%;
  12.   text-align: center;
  13. }
  14.  
  15. .pen-info {
  16.   color: #d4d3d4;
  17.   font-size: 80%;
  18.   text-transform: uppercase;
  19. }
  20.  
  21. .c-button {
  22.   color: #000;
  23.   font-weight: 700;
  24.   font-size: 1em;
  25.   text-decoration: none;
  26.   padding: .7em 1.8em;
  27.   cursor: pointer;
  28.   display: inline-block;
  29.   vertical-align: middle;
  30. }
  31.  
  32. .c-button--gooey {
  33.   color: $color-bluish;
  34.   font-size: 1.3em;
  35.   text-transform: uppercase;
  36.   letter-spacing: 2px;
  37.   border: 4px solid $color-bluish;
  38.   border-radius: 0;  
  39.   padding: 1.2em 3.4em;
  40.   position: relative;
  41.   transition: all 700ms ease;
  42.   .c-button__blobs {
  43.     height: 100%;
  44.     filter: url(#goo);
  45.     overflow: hidden;
  46.     position: absolute;
  47.     top: 0;
  48.     left: 0;
  49.     bottom: -3px;
  50.     right: -1px;
  51.     z-index: -1;
  52.     div {
  53.       background-color: $color-bluish;
  54.       width: 34%;
  55.       height: 100%;
  56.       border-radius: 100%;
  57.       position: absolute;
  58.       transform: scale(1.4) translateY(125%) translateZ(0);
  59.       transition: all 700ms ease;
  60.       &:nth-child(1) {
  61.         left: -5%;
  62.       }
  63.       &:nth-child(2) {
  64.         left: 30%;
  65.         transition-delay: 60ms;
  66.       }
  67.       &:nth-child(3) {
  68.         left: 66%;
  69.         transition-delay: 25ms;
  70.       }
  71.     }
  72.   }
  73.   &:hover {
  74.     color: #fff;
  75.     .c-button__blobs {
  76.       div {
  77.         transform: scale(1.4) translateY(0) translateZ(0);
  78.       }
  79.     }
  80.   }
  81. }

Editor

You can edit this paste and save as new: