<link rel="stylesheet" href="styles.css">

body {
  font-family: Arial;
  margin: 0;
}

.content {padding:20px;}
.babka {
  padding: 60px;
  text-align: left;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

  .button {
  	text-align: center
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
  }

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
  }

.button:active:after {
    padding: 0;
    margin: 0;
    transition: 0s
  }