- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Buttons – Part 3</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button simple-gray">Come</button><br>
<button class="button strong-brown">See</button><br>
<button class="button glossy-blue">Conquer</button>
</body>
</html>
CSS
.simple-gray {
background-image: linear-gradient(#ffffff, #dddddd);
color: #333333;
}
.strong-brown {
background-image: linear-gradient(#cc0630 0%, #8f0222 75%, #6d0019 100%);
color: #ffffff;
}
.glossy-blue {
background-image: none;
color: #ffffff;
}
.button {
display: inline-block;
margin: 20px;
padding: 20px 50px;
border-radius: 5px;
border: none;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
0 1px 3px #aaaaaa;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
font-size: 24px;
font-family: "Lucida Grande", "Arial", sans-serif;
line-height: 25px;
}
html,
body {
margin: 0;
padding: 0;
padding-top: 50px;
text-align: center;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- For the
.glossy-bluebutton, specify a “top to bottom” gradient with the colors#b8e1fc,#90bcea,#90bff0,#6ba8e5,#bdf3fdand the color stops0%,35%,50%,51%,100%.
Comments