Edit in JSFiddle

<link href="https://fonts.googleapis.com/css?family=
Didact+Gothic|Muli|Open+Sans|Questrial" rel="stylesheet">

<div>
  <div>
    <label for="my_input_id" class="my_label">Input Name</label>
    <input type="text" id="my_input_id" class="my_input">
  </div>

  <div>
    <button class='my_button'>Push Me</button>
  </div>
</div>
:root {
  --anim_1: 0.1s ease-in-out;
  --def_shadow_1: 0px 2px 12px 0 #00000030;
}

body {
  display: flex;
  justify-content: center;
  background-color: #f4f6f6;
}

input,
label {
  display: block;
}

div {
  display: inline-block;
  margin-top: 40px;
}

.my_button {
  top: 0px;
  position: relative;
  background-color: #ffed00;
  color: black;
  box-shadow: var(--def_shadow_1);
  height: 40px;
  padding: 0px 24px;
  margin: 12px;
  font-size: 14px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  border-radius: 2px;
  border: none;
  outline: none;
  transition: box-shadow var(--anim_1), top var(--anim_1), transform var(--anim_1), border var(--anim_1);
}

.my_button:hover {
  box-shadow: 0px 2px 24px 0 #00000040;
}

.my_button:active {
  transform: scale(0.95);
  box-shadow: var(--def_shadow_1);
}

.my_input {
  height: 36px;
  border-radius: 2px;
  border: 1px solid #00000060;
  padding: 0px 12px;
  font-size: 14px;
  font-family: 'Muli', sans-serif;
  outline: none;
  transition: box-shadow var(--anim_1), border var(--anim_1);
}

.my_input:hover {
  box-shadow: var(--def_shadow_1);
}

.my_input:focus {
  box-shadow: var(--def_shadow_1);
  border: 1px solid #000000;
}

.my_label {
  margin-bottom: 4px;
  font-size: 14px;
  font-family: 'Muli', sans-serif;
}