using Left: `100px;` css tag dosnt do a thing-CodePudding

Making a website for a minecraft client using css The download button dosnt work when im using thr position tags(Left: 900px; ect.)

also any way to add a BG to the button?

any help on this matter?

Position where i want my button to be in(white box):[White box is the position of button] [1]: https://i.stack.imgur.com/nciQk.png[1]

The code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GlC[v1]</title>
</head>
<body>


<button class="custom-btn btn-16">Download</button>


<style>
    body {
        background-image: url('GLc.png');
        height: 1000px;
        width: 1000px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;


    }

    .btn-16 {
        border: none;
        color: #000000;

    }
    .btn-16:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        direction: rtl;
        z-index: -1;
        box-shadow:
                -7px -7px 20px 0px #fff9,
                -4px -4px 5px 0px #fff9,
                7px 7px 20px 0px #0002,
                4px 4px 5px 0px #0001;
        transition: all 0.3s ease;
    }
    .btn-16:hover {
        color: #000000;
    }
    .btn-16:hover:after {
        left: auto;
        right: 0;
        width: 100%;
    }
    .btn-16:active {
        top: 2px;
    }
    .frame {
        width: 90%;
        margin: 40px auto;
        text-align: center;
    }
    button {
        margin: 20px;
        background-color: black;
     
    .custom-btn {
        width: 130px;
        height: 40px;
        color: #fff;
        border-radius: 5px;
        padding: 10px 25px;
        font-family: 'Lato', sans-serif;
        font-weight: 500;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
        box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
        outline: none;
    }




    html {
        block-size: 100%;
        inline-size: 100%;
    }

    body {
        min-block-size: 100%;
        min-inline-size: 100%;
        margin: 0;
        box-sizing: border-box;
        display: grid;
        place-content: center;
        font-family: system-ui, sans-serif;
    }

    @media (orientation: landscape) {
        body {
            grid-auto-flow: column;
        }
    }




</style>


</body>
</html>```





thanks!

CodePudding user response：

As you asked about the positioning of your button and about adding background to the button. I had done both of the things in my code-snippet.

Hope this will be helpful :)

body{
margin:0;
padding:0;
}
.afterBody{
width:100%;
height:100vh;
background:  url('https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg');
}
.container{
text-align: center;
}
.heading{
font-size:2rem;
font-family: 'Arial Black';
text-align: center;
}

.btn-16{
width: 200px;
height: 100px;
background:  url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkfEqeVhSbaxPfrK2gHi5YvExrSiXZ0M-0UVcHeCAkkRGxlcLYccDMRt8x4ZM4B2119KM&usqp=CAU');
color: white;
font-weight: bolder;
font-size: 30px;
padding: 3%;
margin-top: 5%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GlC[v1]</title>
</head>
<body>

<div class="afterBody">
<div class="container">
<h1 class="heading">Solving your issue on Stackoverflow</h1>
<button class="custom-btn btn-16">Download</button>
</div>
</div>




</body>
</html>