为什么按钮边框没有显示我设置的颜色？

Question

我已经为按钮边框设置了边框颜色，但是当我点击它时按钮没有显示颜色。它呈现出另一种颜色。我该如何解决？

我需要其他帮助。如何设置按钮背景如下图？（其实我也不知道叫什么）

我设计的按钮：

我要设计的按钮：

还有为什么副标题不在一行？为什么要换新线？

* {
    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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 07 (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 To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

Answer 1

我想你正在找这个。

* {
    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;
    white-space: nowrap;
}
button {
    font-size: 18px;
    text-decoration: none;
    color: #926239;
    border: 1px solid #926239;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
    outline: none;
}
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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 07 (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 To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

Answer 2

您必须为此使用 background:transparent：

"I want another help. How can I set button background like the below image? (I actually don't know what it is called)"

* {
    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(https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?size=626&ext=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;
    outline:none;
    background:transparent;
}
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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 07 (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 To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

Answer 3

变化：添加:

background-color: transparent;

在中按钮在CSS文件

中

CSS:

* {
    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;
    background-color: transparent;
    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;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 07 (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 To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

为什么按钮边框没有显示我设置的颜色？

Why button border is not showing the color that I set to it?

html

css

font-awesome