I encountered a strange issue with my CSS - the button background color should be blue with white text, but it is not displaying correctly. I tried moving the code within a div container, but it still doesn't work properly. If anyone knows how to solve this problem, please help! HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restaurant Club</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<section>
<h2>Welcome to restaurant Club</h2>
</section>
<div class="div_design">
<aside>
<form>
<fieldset class="label_design">
<legend class="title_design">Evaluate your choice of restaurant</legend>
<label for="Users" class="label_design">Restaurant evaluate</label>
<input id="Users" type="text" class="text_input" placeholder="Restaurant evaluation">
<button type="button" class="button_design" value="add">Add</button>
</fieldset>
</form>
</aside>
</div>
</body>
</html>
CSS Code
body {
padding: 1.2em;
font: 1.3em "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: #F3F2EF;
}
a {
color: #00B7FF;
}
.div_design {
background-color: #ffffff;
height:auto;
margin: 8%;
margin-right: 5%;
border-radius: 1%;
};
.field_design {
border:none;
};
.label_design {
display:block;
margin: 0.25em;
};
.title_design {
font-size: 2.5rem;
margin: 2%;
border-bottom: 1% solid blue;
}
.text_input {
font-size: 1.2em;
line-height: 1.5;
display: block;
margin: 0.25em;
border-radius: 3px;
};
.button_design {
color:blue;
margin: 0.25em;
background-color: rgba(51,121,245,0.88);
};
This issue is really puzzling to me and I haven't encountered it before. https://i.sstatic.net/InqLR.png