<!-- Guide and tutorial on CSS Shadows: https://sharkcoder.com/visual/shadow -->

<div class="form-wrapper">
  <h2>Log-In Form</h2>
  <form class="outset" action="#" method="post">
    <label>
      <input name="name" class="inset" id="name" type="text" aria-label="Name" placeholder="Name">
    </label>
    <label>
      <input name="password" class="inset" id="password" type="text" aria-label="Password" placeholder="Password">
    </label>
    <div class="btn-wrapper">
      <button class="btn switch-btn outset" type="button" id="btn-remember">Remember Me</button>
      <button class="btn switch-btn outset" type="button" id="btn-night">Night Theme</button>
    </div>
    <button class="btn login-btn outset" type="button">Log In</button>
  </form>
</div>
$border_radius: 15px;
$bgr-main: #eee;
$font-family: "Quicksand", sans-serif;
$color-blue: #a0d8f3;
$color-pink: #f49a74;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: $color-blue;
  padding: 100px 50px;
  font-family: $font-family;
  line-height: 1;
  color: #4a4a4a;
}

h2 {
  text-align: center;
  padding-bottom: 30px;
}

.form-wrapper {
  background-color: $bgr-main;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px 20px;
}

form {
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-flow: column wrap;
  padding: 20px;
  background-color: $bgr-main;
  border-radius: $border_radius;
}

.btn-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

input, .btn {
  outline: none;
  border-style: none;
  border-radius: $border_radius;
  background-color: $bgr-main;
  padding: 10px 15px;
  width: 100%;
  height: 40px;
  font-family: $font-family;
  color: #4a4a4a;
  font-weight: 600;
  font-size: 14px;
}

.btn {
  cursor: pointer;
  margin: 40px 0;
}

input, .switch-btn {
  margin: 8px 0;
}

.switch-btn {
  width: 48%;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 40%;
    left: 15px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;  
    background: -webkit-gradient(linear,left top,left bottom,from(#888),to(hsla(0,0%,100%,0))),#888;
    background: linear-gradient(180deg,#888,hsla(0,0%,100%,0)),#888;
    box-shadow: -1px -1px 5px #fff, 0 2px 5px #888;
  }
}

.inset {
  box-shadow: inset -4px -4px 10px #fff,
              inset 4px 2px 12px #b9bbc4;  
}

.outset {
  box-shadow: 5px 5px 10px #b9bbc4,
              -5px -5px 12px #fff;
}

.login-btn:hover {
  box-shadow: 5px 5px 5px #b9bbc4,
              -5px -5px 5px #fff;
}

.active {
  @extend .inset;
  &:before {
    content: "";
    position: absolute;
    top: 40%;
    left: 15px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: -webkit-gradient(linear,left top,left bottom,from($color-pink),to(hsla(0,0%,100%,0))),$color-pink;
    background: linear-gradient(180deg,$color-pink,hsla(0,0%,100%,0)),$color-pink;
    box-shadow: -1px -1px 5px #fff, 0 2px 5px #f49a74;
  }
}

@media only screen and (max-width: 400px) {
  input, .btn {
    font-size: 12px;
  }
  .switch-btn {
    width: 100%;
  }
}
View Compiled
function buttonClicked() {
  this.classList.toggle('outset');
  this.classList.toggle('active');
}
document.querySelectorAll('.switch-btn').forEach(button => {
  button.onclick = buttonClicked;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.