Responsive buttons w/ transitions

index.html

<h1>Responsive Buttons</h1>

<div class="page">
  
  <div class="container">
    
    <a href="#">
      <div class="box box1">
        <i class="material-icons">payment</i>
        <p>Pay now</p>
      </div>
    </a>

    <a href="#">
      <div class="box box2">
        <i class="material-icons">cancel</i>
        <p>Cancel order</p>
      </div>
    </a>

    <a href="#">
      <div class="box box3">
        <i class="material-icons">phone</i>
        <p>Contact us</p>
      </div>
    </a>

  </div>

</div>

responsive-buttons-w-transitions.markdown

Responsive buttons w/ transitions

I took some time to mess with transitions and play with colorful functionality. If you hover over the buttons they will show a color relating to the function of the button. They are also responsive and shrink when viewed on smaller screens.

A Pen by Calvin Chu on CodePen.

License.

style.scss

@import
url('https://fonts.googleapis.com/css?family=Roboto:100,400'), url('https://fonts.googleapis.com/icon?family=Material+Icons');

body {
  background: #e2e1e0;
  padding: 0 30px 0 30px;
}

* {
  margin: 0;
}

h1 {
  background: linear-gradient(to bottom right, #4FC3F7, #0277BD);
  border-radius: 10px 10px 0 0;
  color: white;
  font-family: "roboto", sans-serif;
  font-size: 35px;
  font-weight: 300;
  margin: 30px 30px 0 30px;
  padding: 20px;
  text-align: center;
}

.page {
  align-content: flex-end;
  background: white;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display: flex;
  justify-content: center;
  margin: 0 30px 0 30px;
  padding: 20px;
}

.container {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 652px;
}

a {
  color: inherit;
  text-decoration: none;
}

.box {
  align-items: center;
  background: #03A9F4;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  color: white;
  display: flex;
  font: 30px "roboto", sans-serif;
  font-weight: 100;
  justify-content: center;
  margin: 10px;
  padding: 15px;
  transition: all 400ms ease-in-out;
}

.box p {
  padding-left: 5px;
}

.box1:hover {
  background: #00E676;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.box1:active {
  background: #69F0AE;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 50ms;
}

.box2:hover {
  background: #F44336;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
}

.box2:active {
  background: #E57373;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 50ms;
}

.box3:hover {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.box3:active {
  background: #4FC3F7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 50ms;
}

@media (min-width: 755px) {
  .page, h1 {
    max-width: 660px;
  }  
  .page {
    margin: 0 auto;
  }
  h1 {
    margin: 30px auto 0 auto;
  }
}

@media (max-width: 752px) {
  .page, h1 {
    max-width: 519px;
  }
  .page {
    margin: 0 auto;
  }
  h1 {
    margin: 30px auto 0 auto;
  }
  .box3 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }
  .box3 p {
    display: none;
  }
}

@media (max-width: 619px) {
  .box2 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }
  .box2 p {
    display: none;
  }
}

@media (max-width: 470px) {
  .box1 {
    border-radius: 100%;
    height: 37px;
    width: 37px;
  }
  .box1 p {
    display: none;
  }
  .page {
    padding: 20px 2px;
  }
  h1 {
    font-size: 2em
  }
}

@media (max-width: 330px) {
  body {
    padding: 0;
  }
  .page, h1 {
    margin: 0;
    border-radius: 0;
  }
  h1 {
    padding-top: 50px;
  }
}

@media (max-width: 240px) {
  h1 {
    display: none;
  }
}