<!--
.btn{
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
}

.btn:hover{
    background: #668ad8;
     box-shadow: 0px 0px 0px 5px #668ad8;
}
-->

.white{
    color: #FFF;
}

.btn2{
    display: inline-block;
    text-decoration: none;
    background: #dda0dd;
    color: #FFF;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #dda0dd;
    border: dashed 1px #FFF;
    transition: .4s;
}

.btn2:hover{
    background: #da70d6;
     box-shadow: 0px 0px 0px 5px #da70d6;
}

.btn3{
    display: inline-block;
    text-decoration: none;
    background: #98fb98;
    color: #FFF;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #98fb98;
    border: dashed 1px #FFF;
    transition: .4s;
}

.btn3:hover{
    background: #00ff7f;
     box-shadow: 0px 0px 0px 5px #00ff7f;
}

.btn4{
    display: inline-block;
    text-decoration: none;
    background: #f0e68c;
    color: #FFF;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #f0e68c;
    border: dashed 1px #FFF;
    transition: .4s;
}

.btn4:hover{
    background: #ffff00;
     box-shadow: 0px 0px 0px 5px #ffff00;
}