Centrar Botones y Animar Fondo

¿Cómo Centrar botones y Animar un Fondo? con CSS y HTML

VIDEO ¿Cómo Centrar botones y Animar un Fondo? con CSS y HTML

Para centrar usaremos flexbox y para animar un fondo los keyframes que nos permiten realizar animaciones increíbles sin javascript

Para centrar usaremos flexbox y para animar un fondo los keyframes que nos permiten realizar animaciones increíbles sin javascript

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    html,body{padding: 0; margin: 0;}
    body{
      background: linear-gradient(90deg, green 50%, greenyellow 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      animation: bg 1s infinite linear;
    }
a{
  border-radius: 20px;
  padding: 10px 50px;
  margin: 10px;
  text-decoration: none;
}
a:hover{
  background: rgba(255, 255, 255, 0.543);
}
#btn_left{color: greenyellow;border: 1px solid greenyellow;}
#btn_right{color: green;border: 1px solid green;}
@keyframes bg {
  0% { background: linear-gradient(0deg, green 50%, greenyellow 50%);}
  25% { background: linear-gradient(45deg, green 50%, greenyellow 50%);}
  50% { background: linear-gradient(90deg, green 50%, greenyellow 50%); }
  75% { background: linear-gradient(135deg, green 50%, greenyellow 50%); }
  100% { background: linear-gradient(180deg, green 50%, greenyellow 50%); }
}
  </style>
</head>
<body>
  <a href="https://codea.app" id="btn_left" target="_blank">Botón</a>
  <a href="https://codea.app" id="btn_right" target="_blank">Botón</a>
</body>
</html>

 

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 727 veces | Publicado hace 6 meses

Curso HTML + CSS Página Web Básica

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE HTML

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021