CSS Plus/Minus Icon

by henser

HTML

<div class="container">
    <div class="button"></div>
</div>

SCSS

.button{
    position: relative;
    width: 30px;
    height: 30px;

    &:before,
    &:after{
        content: "";
        position: absolute;
        background-color: black;
        transition: transform 0.25s ease-out;
    }

    /* Vertical line */
    &:before{
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        margin-left: -2px;
    }

    /* horizontal line */
    &:after{
        top: 50%;
        left: 0;
        width: 100%;
        height: 4px;
        margin-top: -2px;
    }
    
    &:hover{
        cursor: pointer;
        
        &:before{ transform: rotate(90deg); }
        &:after{ transform: rotate(180deg); }
    }
}