*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body{
    background: #000;
}

.button-box{
    width: 240px;
    height: 240px;
    background: #e91e63;
    border-radius: 6px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sun{
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;

    position: relative;
}
.sun div{
    height: 3px;
    width: 160px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;  
    z-index: -1;

    transition: width 0.5s;
}

.sun .line1{
    width: 160px;
    transform: translate(-50%, -50%);
}
.sun .line2{
    width: 160px;
    transform: translate(-50%, -50%) rotate(90deg);
}
.sun .line3{
    width: 140px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.sun .line4{
    width: 140px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.sun::after{
    content: '';
    width: 100px;
    height: 100px;
    background: #e91e63;
    border-radius: 50%;
    position: absolute;
    top: -100px;
    right: -100px;
    transition: 0.5s;
}
.sun.night::after{
    top: -25px;
    right: -25px;
}
.sun.night div{
    width: 0;
}