After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue?
I need some assistance with setting the background of my button to match the image below (I'm unsure of what it's called).
The button I designed:
https://i.stack.imgur.com/Ua9FZ.jpg
The button design I'm aiming for:
https://i.stack.imgur.com/g6WXb.jpg
Additionally, why is the subheadline not staying on one line? It keeps moving to a new line.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
color: #926239;
line-height: 1.6;
}
.first-div {
background: url(./pexels-miguel-á-padriñán-1591060.jpg);
height: 100vh;
width: 100%;
background-attachment: scroll;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
.homepage-text {
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.headline {
color: #926239;
font-size: 50px;
line-height: 1.2;
}
.subheadline {
color: #926239;
}
button {
font-size: 18px;
text-decoration: none;
color: #926239;
border: 1px solid #926239;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
button:hover {
border: 1px solid #926239;
background: #926239;
color: white;
}
second-div {
color: white;
background: #926239;
padding: 20px;
text-align: center;
}
third-div {
background: #f4f4f4;
padding: 20px;
text-align: center;
}
.section {
display: flex;
width: auto;
height: auto;
text-align: left;
}
box-01, .box-03 {
padding: 20px;
color: white;
background: #926239;
}
.box-02 {
padding: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
/* Repeat meta tags */
<title>Project Name (Landing page)</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="first-div">
<div class="homepage-text">
<h1 class="headline">Welcome Title Here</h1>
<p class="subheadline">Place your subheadline here.</p>
<button>Read More</button>
</div>
</div>
<div class="second-div"><p>Content goes here.</p></div>
<div class="third-div"><p>More content goes here.</p></div>
<section class="section">
<div class="box-01">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolorum est, molestias dolores sunt nobis temporibus veritatis odio!</p>
</div>
<div class="box-02">
<p>Another Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolorum est, molestias dolores sunt nobis temporibus veritatis libero!</p>
</div>
<div class="box-03">
<p>Even more content lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolorum est, molestias dolores quis nobis temporibus veritatis libero!</p>
</div>
</section>
</div>
</body>
</html>