button-change-icon-on-hover.css

style.css

#menu-item-282 a {
    font-family: Arial !important;
    text-indent: -99999px !important;
    position: relative;
    font-size: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-block;
    background-color: #000;
    border-radius: 50%;
}
#menu-item-282 a::before {
    content: "";
    font-family: 'EtModules';
    font-size: 30px;
    position: absolute;
    color: #fff !important;
    text-indent: 0;
    left: 50%;
    top: 50%;
    transform: translatex(-50%) translatey(-50%);
    transition: all 300ms ease;
}
#menu-item-282 a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translatex(-50%) translatey(-50%);
    margin-top: 60px;
    opacity: 0;
    transition: all 300ms ease;
    font-size: 30px;
    color: #fff;
    text-indent: 0;
    font-family: 'EtModules';
}
#menu-item-282:hover a::before {
    margin-top: -60px;
    opacity: 0;
}
#menu-item-282 a:hover::after {
    margin-top: 0;
    opacity: 1;
}