.button {
    color: $color1;
    background-color: $color2;
    width: 500px;
    height: 50px;
    &:hover {
        color: $color3;
        background-color: lighten($color2, 10%);
    }
    @media screen and (max-width:500px) {
        width: 100%;
    }
}

使用@media screen and (max-width:500px)>> 小於500px時 寬度為100%