How can I shorten the Button? So far I created a button but as of now the background color is extend-CodePudding

My button's background color so far is extended way too far out on both right and left side. I tried to fix it but when i do, the button ends up going way too far left or right. I used a Width option to fix it but no luck. What can i do to fix the problem.

.destination-reccomendations{
    background-image: url(Images/*****************);
    background-position: center;
    background-size: cover;
    position: relative;
    min-height: 50vh;
    width: 100%;
}
.dr-text{
    text-align: center;
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 40%;
}
.dr-text h1{
    text-align: center;
    font-size: 50px;
}
.dr-text h3{
    text-align: center;
    font-size: 25px;
    padding-bottom: 20px;
}
.button{
    background-color: green;
    border-radius: 30px;
    padding: 5px;
}
.button-text h1{
    color: black;
    font-size: 30px;
}

<section >
        <div >
            <h1>Explore the Beauty of our State</h1>
            <h3>Read more about destinations and reccomendations</h3>
            <div >
                <div >
                    <h1>Read More</h1>
                </div>
            </div>
        </div>

CodePudding user response：

You need to reduce your padding on the .dr-text and .dr-text h3 CSS attributes. Thats what causing the large size of the button.

CodePudding user response：

You can specify the with of your button and keep it centered by changing your class :

.button{
    background-color: green;
    border-radius: 30px;
    padding: 5px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
}

Here's a snippet.

.destination-reccomendations{
    background-image: url(https://dummyimage.com/800x405/8a8a8a/fff&text= );
    background-position: center;
    background-size: cover;
    position: relative;
    min-height: 50vh;
    width: 100%;
}
.dr-text{
    text-align: center;
    color:white;
    position: absolute;
    transform: translate(-50%, -30%);
    left: 50%;
    top: 40%;
}
.dr-text h1{
    text-align: center;
    font-size: 50px;
}
.dr-text h3{
    text-align: center;
    font-size: 25px;
    padding-bottom: 20px;
}
.button{
    background-color: green;
    border-radius: 30px;
    padding: 5px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
}
.button-text h1{
    color: black;
    font-size: 30px;
}

<section >
        <div >
            <h1>Explore the Beauty of our State</h1>
            <h3>Read more about destinations and reccomendations</h3>
            <div >
                <div >
                    <h1>Read More</h1>
                </div>
            </div>
        </div>
</section>