Buttons

nice colored buttons with animation

by Florin Pop

HTML

<button class="btn btn1">button1</button>
<button class="btn btn2">button2</button>
<button class="btn btn3">button3</button>
<button class="btn btn4">button4</button>
<button class="btn btn5">button5</button>

CSS

.btn {
    font-size: 15px;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 10px 0;
    background-color: white;
    border-width: 1px 2px 5px 1px;
    transition: padding 0.2s linear;
    animation: myAnimation 1s 2;
    /* Chrome, Safari, Opera */
    -webkit-animation: myAnimation 1s 2;
}
.btn:hover {
    color:white;
    padding:15px 25px;
}
.btn:focus {
    outline: none;
}
.btn1 {
    color: #FF851B;
    border-color: #FF851B;
}
.btn1:hover {
    background-color:#FF851B;
}
.btn2 {
    color: #55bada;
    border-color: #55bada;
}
.btn2:hover {
    background-color:#55bada;
}
.btn3 {
    color: #BADA55;
    border-color: #BADA55;
}
.btn3:hover {
    background-color:#BADA55;
}
.btn4 {
    color: #FF4136;
    border-color: #FF4136;
}
.btn4:hover {
    background-color:#FF4136;
}
.btn5 {
    color: #FFDC00;
    border-color: #FFDC00;
}
.btn5:hover {
    background-color: #FFDC00;
}
@-webkit-keyframes myAnimation {
    0% {
        padding:15px 20px;
    }
    50% {
        padding:20px 15px;
        margin-right:15px;
        margin-top:10px;
    }
    100% {
        padding:15px 20px;
        margin-right:0px;
    }
}
@keyframes myAnimation {
    0% {
        padding:15px 20px;
    }
    50% {
        padding:20px 15px;
        margin-right:15px;
    }
    100% {
        padding:15px 20px;
        margin-right:0px;
    }
}