.glossy-button {
    display: inline-block;
    position: relative;
    background-color: #AAA;
    background-image: linear-gradient( /* chrome */
      hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
      hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
    );
    font-size: 22px;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    padding: 20px 40px;
    text-shadow:
      0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
      0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
    border: none;
    border-radius: 50px;
    margin: 10px;
    box-shadow:
      inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
      inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
      /* multiple light sources yall */
      -8px 8px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
      5px 18px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  
  /* highlight */
  .glossy-button:before {
    content: '';
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 5px;
    height: 30px;
    border-radius: 15px;
    background: linear-gradient(
      hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) );
  }
  
  .glossy-button--blue { background-color: #19F; }
  .glossy-button--gold { background-color: #EA0; }
  .glossy-button--green { background-color: #6C6; }
  .glossy-button--red { background-color: #E21; }
  
  .glossy-button:hover {
    transform: scale(1.05);
    box-shadow:
      inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
      inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
      /* multiple light sources yall */
      -12px 12px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
      10px 25px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
  }