Cool gradient buttons

Gust some cute looking gradient buttons :)

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
.gradient_box {
    font-size: 24px;
    line-height: 100px;
    font-weight: 300;
    font-family: "Open Sans",sans-serif;
    width:300px;
    height:100px;
    margin:10px auto;
    color: #fff;
    text-align:center;
    cursor: pointer;
    border-radius: 20px;
}
.gradient_box:hover {
    width:310px;
}
.gradient_box.orange {
    background: #f69259;
    background: linear-gradient(to bottom left,#f69259,#f16975);
    background-size: cover;
    background-position: center;
}
.gradient_box.babby_blue {
    background: #85cba8;
    background: linear-gradient(to bottom left,#85cba8,#76c4e2);
    background-size: cover;
    background-position: center;
}
.gradient_box.purple {
    background: #ba77b1;
    background: linear-gradient(to bottom left,#ba77b1,#8176b5);
    background-size: cover;
    background-position: center;
}
.gradient_box.blue {
    background: #76c4e2;
    background: linear-gradient(to bottom left,#76c4e2,#8176b5);
    background-size: cover;
    background-position: center;
}