learn to code 2 home page

by Vince Richter

HTML

<html>

  <head>
    <title>cool buttons</title>
    <style>
      body {
        font-family: 'mali'
      }

      .container {
        width: 500px;
        height: 100px;
        margin: 50px;
        text-align: center;
      }

      .mybutton {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        background: green;
        color: white;
        text-decoration: none;
        transition: all 3s;
        box-shadow: 10px 10px 10px gray;
      }

      .mybutton:hover {
        background: blue;
        border-radius: 35px;
        transition: all 3s;
      }

    </style>

  </head>

  <body>
    <h1>
      <div class="container">

        <a href="#" class="mybutton">Learn to Code</a>

      </div>
    </h1>

  </body>
  <center>

    <head>



      <meta charset="utf-8">
      <title>Button Ripple</title>
      <link rel="stylesheet" href="button.css">
      <link href="https://fonts.googleapis.com/css?family=mali" rel="stylesheet">

      <body>
        <button>
            HTML
        </button>

        <script src="button.js"></script>
      </body>
    </head>
    <br>
    <meta charset="utf-8">
    <title>Button Ripple</title>
    <link rel="stylesheet" href="button.css">
    <link href="https://fonts.googleapis.com/css?family=mali" rel="stylesheet">

    <body>
      <button>
            css
        </button>

      <script src="button.js"></script>
    </body>
    <br>
    <meta charset="utf-8">
    <title>Button Ripple</title>
    <link rel="stylesheet" href="button.css">
    <link href="https://fonts.googleapis.com/css?family=mali" rel="stylesheet">

    <body>
      <button>
        Javascript
        </button>

      <script src="button.js"></script>
    </body>

CSS

body {
  background-color: white;
}

button {
  font-family: "mali";
  font-size: 24px;
  padding: 1em 2em;
  margin: 3px;
  border: 0;
  outline: 0;
  color: white;
  background-color: black;
  text-transform: uppercase;
  border-radius: 0.15em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

button .ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: scale(0);
  animation: ripple 2s linear;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

JavaScript

var buttons = document.getElementsByTagName('button');

Array.prototype.forEach.call(buttons, function(b) {
  b.addEventListener('click', createRipple);
});

function createRipple(e) {
  var circle = document.createElement('div');
  this.appendChild(circle);

  var d = Math.max(this.clientWidth, this.clientHeight);

  circle.style.width = circle.style.height = d + 'px';

  var rect = this.getBoundingClientRect();
  circle.style.left = e.clientX - rect.left - d / 2 + 'px';
  circle.style.top = e.clientY - rect.top - d / 2 + 'px';

  console.log(this);

  circle.classList.add('ripple');
}