<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,600)
*
  box-sizing: border-box
html
  height: 100%
body
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  font-size: 16px
  background: tomato
  background: radial-gradient(lighten(tomato,5), tomato)
  font-family: Ubuntu
  -webkit-font-smoothing: antialiased
  
form
  position: relative
  margin: 5em auto
  padding: 3em 2em
  width: 26em
  background: linear-gradient(#f5f5f5,#fff)
  text-align: center  
  border-radius: 10px
  box-shadow: 0 2px 15px rgba(#000,0.25), inset 0 -3px 0 rgba(#000,0.15)
  animation: appear 0.5s  
  transform: translateZ(1)
  &:after
    content: ""
    height: 1em
    width: 1em
    top: -0.8em
    left: 50%
    transform: translateX(-50%)
    position: absolute
    border: 6px solid #fff
    background: tomato
    box-shadow: inset 0 2px 5px rgba(#000,0.2), 0 1px 1px rgba(#000,0.2)
    border-radius: 50%
  label, input
    display: block
    width: 20rem
    margin: 0 auto
  label
    display: block
    position: relative
    font-size: 1.1em
    text-transform: uppercase
    font-weight: 500
    margin: 0 auto 0.5em
    padding: 0 0 1em
    color: #aaa
    text-align: center
    animation: appear-inner 0.3s linear
  input[type="email"]
    -webkit-appearance: none
    margin: 0 auto 1em
    padding: 1em
    font-size: 1em
    border: 1px solid #ddd
    border-top-color: #ccc
    border-radius: 3px
    animation: appear-inner 0.35s linear
    &:focus
      outline: none
      color: tomato
      border-color: tomato
      font-style: normal
  input[type="submit"]
    -webkit-appearance: none
    border-radius: 0
    font-size: 1em
    font-weight: 600
    padding: 1em
    background: tomato
    border: 1px solid darken(tomato,0.1)
    border-radius: 3px
    color: #fff
    text-shadow: 0 1px 0 rgba(0,0,0,0.15)
    text-transform: uppercase
    transition: all 0.2s
    animation: appear-inner 0.4s linear
    &:hover
      background: lighten(tomato,5)
      transform: translateY(-4%)
      box-shadow: 0 2px 5px rgba(0,0,0,0.3)
    &:focus
      outline: none
      transform: none
      box-shadow: 0 0 0 1px #fff, 0 0 0 2px tomato
  
@keyframes appear
  0%
    opacity: 0
    transform: translateY(-10%) scale(0.7)
  100%
    opacity: 1
    transform: translateY(0) scale(1)
@keyframes appear-inner
  0%
    opacity: 0
    transform: translateY(100%) 
  100%
    opacity: 1
    transform: translateY(0)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.