5 replies

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.

KP-C

Kevin Powell - Community•3y ago•

5 replies

Lights

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;
}

Need help in positioning button elements.

Similar Threads

Need help in positioning button elements.

Similar Threads

Similar Threads

Similar Threads