Centrar Botones y Animar Fondo

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

Video Centrar botones con HTML CSS
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

¿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

<!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>

 

No tiene descargable

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

Whatsapp Messenger Facebook Twitter

Visitado 1439 veces | Publicado hace 9 meses

Curso HTML + CSS Página Web Básica

Mira el temario del curso en el siguiente link

VER EL CURSO

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