Lights Posts - Answer Overflow

Lights

•Created by Lights on 12/20/2023 in #front-end

Need help in positioning button elements.

This is my simple html here:

<body>
    <button>
        <span></span>
    </button>  
</body>

<body>
    <button>
        <span></span>
    </button>  
</body>

and here is my CSS code:

button{
    background-color: rgb(255, 154, 154);
    border-radius: 22px;
    width: 100px;
    height: 48px;
    border: 0;
    position: relative;


}
button span{
    background-color: rgb(0, 0, 0);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;

    left: 200px;
}

button{
    background-color: rgb(255, 154, 154);
    border-radius: 22px;
    width: 100px;
    height: 48px;
    border: 0;
    position: relative;


}
button span{
    background-color: rgb(0, 0, 0);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;

    left: 200px;
}

In this code I'm basically trying to do align the button (button span) inside the button by using relative and position but for some reason, and I wanna use left and right property in it but when I use it. It does work but it moves left and right taking body as its parent element and not the button. Even though I've set the button to relative and buttons span: absolute.

6 replies

Gaming

Programming