- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paper buttons, step 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="material.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="blue-theme">
<section class="card">
<h1 class="question"><span>Does HTML stand for “How To Meet Ladies”?</span></h1>
<form class="answers" action="https://echo.htmlacademy.ru/courses" method="post">
<button class="fab" type="submit"></button>
<div class="yes-no-selector">
<div class="paper-btn paper-btn-true">
<input type="radio" name="answer" id="yes-answer">
<label for="yes-answer">True</label>
</div>
<div class="paper-btn paper-btn-false">
<input type="radio" name="answer" id="no-answer">
<label for="no-answer">False</label>
</div>
</div>
</form>
</section>
</body>
</html>
CSS
.paper-btn {
display: inline-block;
margin: 58px 12px;
}
.paper-btn label {
display: inline-block;
width: 80px;
border-radius: 3px;
background-color: #f5f5f5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
color: #616161;
text-transform: uppercase;
font-size: 14px;
line-height: 40px;
cursor: pointer;
}
.paper-btn input {
display: none;
}
.paper-btn-true input:checked ~ label {
}
.paper-btn-false input:checked ~ label {
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the background color to
#00e676for the active state of the “True” button, - and set the background color to
#ff5252for the active state of the “False” button.
Toggle the “True” or “False” buttons to test the result.
Comments