Skip to content

Instantly share code, notes, and snippets.

@calchulus calchulus/index.html forked from anonymous/index.html
Created Jan 25, 2017

Embed
What would you like to do?
Responsive buttons w/ transitions
<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

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.

@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.