.custom-button {
    transition: all 0.3s ease;
}

.custom-button:hover {
    animation-name: jelly;
    animation-duration: 1s;
    animation-timing-function: ease;
}

.custom-button.yellow {
    color: #000;
    background-color: #ffd500;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd500), to(#f7a600));
    background-image: -webkit-linear-gradient(top, #ffd500, #f7a600);
    background-image: -moz-linear-gradient(top, #ffd500, #f7a600);
    background-image: -ms-linear-gradient(top, #ffd500, #f7a600);
    background-image: -o-linear-gradient(top, #ffd500, #f7a600);
    border: 1px solid #e79b00;
    text-shadow: #e79b00 1px 1px 0;
}

.custom-button.yellow:hover {
    color: #fff;
    background-color: #111;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
    background-image: -webkit-linear-gradient(top, #333, #000);
    background-image: -moz-linear-gradient(top, #333, #000);
    background-image: -ms-linear-gradient(top, #333, #000);
    background-image: -o-linear-gradient(top, #333, #000);
    border: 1px solid #000;
    text-shadow: #000 1px 1px 0;
}

.custom-button.color {
    color: #ffffff;
    background-color: #d12329;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12329), to(#B10013));
    background-image: -webkit-linear-gradient(top, #d12329, #B10013);
    background-image: -moz-linear-gradient(top, #d12329, #B10013);
    background-image: -ms-linear-gradient(top, #d12329, #B10013);
    background-image: -o-linear-gradient(top, #d12329, #B10013);
    border: 1px solid #d12329;
    text-shadow: #000 1px 1px 0;
	font-size: 0.95em;
	font-weight: bold;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
	margin-bottom: 5%;
	margin-top: 3%;
}

.custom-button.color:hover {
    background-color: #222;
    color: #ffffff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
    background-image: -webkit-linear-gradient(top, #333, #000);
    background-image: -moz-linear-gradient(top, #333, #000);
    background-image: -ms-linear-gradient(top, #333, #000);
    background-image: -o-linear-gradient(top, #333, #000);
	border: 1px solid #000;
}

@keyframes jelly {
    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}