Ripples

index.haml

.hero
  %h1 Ripples
  %p This is a cool little mixin I made in SCSS for button animations. Hover over the buttons to see the magic! I hope you like it and I hope it comes in handy for you!
  
  %h1 Usage
  %p Usage: Just @include ripples on the button element or any classes you want the animation to be applied. The mixin takes in three parameters, colour, growth field and the size of the button
  
  %a{'href' => 'https://github.com/Jackthomsonn/ripples', 'target' => '_blank'} Get Ripples

.container
  %button
    %i.material-icons explore
  %button
    %i.material-icons code
  %button
    %i.material-icons done
  %button
    %i.material-icons add

ripples.markdown

Ripples

This is a cool little mixin I made in SCSS for button animations. Hover over the buttons to see the magic! I hope you like it and I hope it comes in handy for you!

A Pen by Jack Thomson on CodePen.

License.

style.scss

// Ripples
@mixin ripples($color, $growthField, $size) {
  background: $color;
  border-radius: 100%;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: $size + px;
  height: $size + px;
  &:hover:before {
    content: '';
    width: $size + px;
    height: $size + px;
    position: absolute;
    border-radius: 100%;
    animation: ripples .8s ease-in-out
  }
  > .material-icons {
    color: icon-color($color)
  }
  @keyframes ripples {
    0% {
      border: 1px solid transparent;
    }
    100% {
      border: $growthField + px solid darken($color, 12%);
      opacity: 0
    }
  }
}

@function icon-color($color) {
  @if (lightness($color) > 50) {
    @return darken($color, 30)
  }
  @else {
    @return lighten($color, 30)
  }
}

// Demo Styles
* {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
}

html, body {
  background: #EEE;
  display: flex;
}

.hero {
  padding: 1em;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
  height: 90vh;
  flex: 1;
  h1,
  p {
    text-align: center;
  }
  h1 {
    color: #4096EE
  }
  p {
    color: #777;
    font-size: .9em;
    padding: 1em;
  }
  a {
    background: #4096EE;
    color: #FFF;
    width: 10em;
    font-size: .9em;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    border-radius: 100px;
    text-transform: uppercase;
  }
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: column wrap;
  background: #4096EE;
  height: 100vh;
  flex: 1;
}


button {
  @include ripples(#FEFEFE, 20, 50)
}