Ha visitado muchos sitios web y ha visto muchos botones flotantes presentes en esos sitios web. Por lo tanto, dicho efecto de animación del botón flotante se puede generar fácilmente mediante HTML y CSS . Al usar HTML, diseñaremos la estructura básica del botón y luego, al usar las propiedades de CSS, podemos crear el efecto de animación flotante.
Se proporciona un video de muestra para comprender la tarea de hoy con más claridad.
Implementación paso a paso
Paso 1: Primero, diseñaremos una estructura de botón simple usando una etiqueta de botón de HTML. Los comentarios ya están en código para su ayuda.
HTML
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Give a suitable title --> <title>GFG| Button Styling</title> </head> <body> <!-- Create heading using h1 tag --> <h1> GeeksForGeeks Button Styling</h1> <div class = "container"> <!--creation of button--> <button class="btn btn1">Click Me</button> <button class="btn btn2">Click Me</button> </div> </body> </html>
Paso 2: A continuación, usaremos algunas propiedades de CSS para diseñar el botón y usaremos la clase de desplazamiento para obtener el efecto de animación cuando pasemos el mouse sobre el botón .
/* Styling background */
body {
margin: 0;
padding: 0;
}
/* Styling heading */
h1 {
font-size: 35px;
color: green;
text-align: center;
}
/* Styling container class */
.container {
text-align: center;
margin-top: 150px;
}
/* Styling btn class */
.btn {
background: none;
border: 1px solid green;
font-size: 23px;
padding: 10px 20px;
font-family: "montserrat";
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
/* Styling btn1, btn2 class */
.btn1,
.btn2 {
color: green;
}
/* Creating animation effect */
.btn1:hover,
.btn2:hover {
color: #fff;
}
.btn::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: green;
z-index: -1;
transition: 0.8s;
}
.btn1::before {
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before {
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn1:hover::before,
.btn2:hover::before {
height: 180%;
}
/* Completion of animation effect */
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un botón flotante usando HTML y CSS.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<style>
/* Styling background */
body {
margin: 0;
padding: 0;
}
/* Styling heading */
h1 {
font-size: 35px;
color: green;
text-align: center;
}
/* Styling container class */
.container {
text-align: center;
margin-top: 150px;
}
/* Styling btn class */
.btn {
background: none;
border: 1px solid green;
font-size: 23px;
padding: 10px 20px;
font-family: "montserrat";
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
/* Styling btn1, btn2 class */
.btn1,
.btn2 {
color: green;
}
/* Creating animation effect */
.btn1:hover,
.btn2:hover {
color: #fff;
}
.btn::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: green;
z-index: -1;
transition: 0.8s;
}
.btn1::before {
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before {
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn1:hover::before,
.btn2:hover::before {
height: 180%;
}
/* completion of animation effect code */
</style>
</head>
<body>
<!-- Create heading using h1 tag -->
<h1> GeeksForGeeks Button Styling</h1>
<div class="container">
<!-- Creation of button -->
<button class="btn btn1">Click Me</button>
<button class="btn btn2">Click Me</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA