EXCITING BUTTON

exciting-button.markdown

EXCITING BUTTON

my take on the material design clicky thinger

A Pen by Adam Kuhn on CodePen.

License.

index.html

<div id="wrapper"><a class="button">Click Me</a></div>

script.js

$(function(){
    $('#wrapper').click(function(e){
        $(this).addClass('dark');
        var x = e.pageX + 'px';
        var y = e.pageY + 'px';
        var img = $('<div class="blip"></div>');
        var div = $('<div class="blip">').css({
            "position": "absolute",                    
            "left": x,
            "top": y
        });
        div.append(img);
        $('#wrapper').append(div);          setTimeout(function(){
        $('#wrapper').removeClass('dark');
      }, 1250);
    });
    
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$cream : #f1f0eb;
$dark : #0d2549;
$red : #f13c46;
$sans : 'Bungee Shade', cursive;
$outline : 'Bungee Outline', cursive;

body{
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:$cream;
  position:relative;
  #wrapper{
    display:inline-block;
    padding:20px 20px;
    overflow:hidden;
    background:$red;
    box-shadow:0px 0px 0px 5px $cream, 0px 0px 0px 10px $red;
    &.dark{
      .button{
         &:before{
          z-index:2;
          opacity:1;
        }
        &:after{
          opacity:1;
        }
        
      }
    }
    .button{
      font-family:$outline;
      font-size:35px;
      color:$cream;
      position:relative;
      width:100%;
      height:100%;
      padding:20px 20px;
      z-index:2;
      &:after{
        content:'';
        position:absolute;
        width:calc(100% + 50px);
        height:calc(100% + 20px);
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        opacity:0;
        transition:0.5s;
        background: repeating-linear-gradient(
      45deg,
      $cream,
      $cream 10px,
      $red 10px,
      $red 11px
      );
        background-position: 0px 0px;
	background-repeat: repeat-x;

        animation: partyTime 40s linear infinite;
        @keyframes partyTime {
	from { background-position: 0 0; }
	to { background-position: 500px 0; }
}
      }
      &:before{
        content:'HOORAY!';
        font-family:$sans;
        position:absolute;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        color:$red;
        z-index:-1;
        opacity:0;
        transition:0.5s;
        background:$cream;
      }
    }
    .blip{
      width:10px;
      height:10px;
      border-radius:100%;
      display:block;
      z-index:1;
      opacity:1;
      background:$cream;
      animation:blip 2s ease-out forwards;
      @keyframes blip{
        0%{
          opacity:0;
        }
        2.5%{
          opacity:1;
          box-shadow:0px 0px 0px 0px $cream;
        }
        25%{
          opacity:1;
          box-shadow:0px 0px 0px 300px $cream;
        }
        50%{
          opacity:1;
          box-shadow:0px 0px 0px 300px $cream;
          transform:translateX(0%) translateY(0%);
        }
        97.5%{
          opacity:1;
          box-shadow:0px 0px 0px 0px $cream;
          top:50%;
          left:50%;
          transform:translateX(-50%) translateY(-50%);
        }
        100%{
          opacity:0;
          top:50%;
          left:50%;
          transform:translateX(-50%) translateY(-50%);
        }
      }
    }
  }
}