- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Botones: parte 3</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button simple-gray">Llegar</button><br>
<button class="button strong-brown">Ver</button><br>
<button class="button glossy-blue">Vencer</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;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Asigna al botón
.glossy-blueun degradado de arriba hacia abajo con los colores#b8e1fc,#90bcea,#90bff0,#6ba8e5,#bdf3fdy las posiciones0%,35%,50%,51%,100%.