Basic CSS transition using box-shadow

Setting up a transitions for your buttons when the cursor is over them.

by Génesis García Morilla

HTML

<i>☺</i>
<i>☺</i>
<i>☺</i>

CSS

i { 
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    width: 140px;
    height: 140px;
    line-height: 140px;
    font-size: 70px;
    color: white;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 0 0 75px #E94F37 inset;
}

i:hover {
    box-shadow: 0 0 0 4px #E94F37 inset;
    color:#E94F37;
}

i:nth-child(even) {
   box-shadow: 0 0 0 75px #44BBA4 inset; 
}

i:nth-child(even):hover {
    box-shadow: 0 0 0 4px #44BBA4 inset;
    color:#44BBA4;
}