ESPECTACULAR efecto para tu BOTÓN con sólo CSS
HTML-код
- Опубликовано: 20 ноя 2022
- Usando una animación, un poco de blur y el pseudo elemento before, tienes un botón super llamativo para tu web.
¿Qué te parece? Di algo en los comentarios. 💬
#shorts 
Наука
button {
background: black;
cursor: pointer;
border: none;
padding: 16px 32px;
color: azure;
font-size: 24px;
font-weight: bold;
position: relative;
border-radius: 12px;
}
button:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(45deg, red, blue, deeppink, blue, red, blue, deeppink, blue);
background-size: 800%;
border-radius: 12px;
filter: blur(8px);
animation: glowing 20s linear infinite;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
sos un capo hermano!!
heroe sin capa
Te amo❤
Grande
Oigan tengo una pregunta, porque a mí no me sale cuando tengo una imagen de fondo? En ese caso que puedo hacer? Porque si le quito la imagen si me sale
Aprovecharé la oportunidad de cada pequeño video que hagas para decirte LO MÁQUINA QUE ERES!!! En la comunidad se te quiere :)
Grasias! 🧙🏼♂🧙🏼♂
Muchas gracias, Franz!!!! 🤗
@@midudevpara la siguiente deja el codigo en los comentarios para estudiarlos
@@Ghost_Egocentricoyo utilizo copyfish es una extensión de Chrome , seleccionas una imagen o vídeo en este caso y te saca el texto. Osea copias el texto del propio video
Estoy aprendiendo html y css de a poquito en freecodecamp, y videos asi me motivan y me dan ganas de seguir aprendiendo
Yo ando en los mismo. 😃 .
no me funcionaba pero volvi a hacerlo paso por paso y el error que tuve fue que coloque un espacio en los grados eso tiene que quedar pegado osea asi 45deg si lo colocan de la siguiente forma 45 deg no les va a funcionar y en la parte donde el coloca button ::before la pueden cambiar por button:hover::before la animacion solo aparecera cuando pases el mouse por el boton
Si algo caracteriza la programacion es que uno puede pasarse horas buscando un error para que al final sea o que te olvidaste de poner un punto y coma o cualquier otra cosa como colocar mal en nombre de una variable
Guapísimo!!! Me flipan estos short!!! Enhorabuena!!!!!
no puedo conseguir el efecto rgb del botón, no me toma el nombre de la animación
Maravilloso, te ganaste un nuevo seguidor ♥️♥️
Algún día llegaré al modo Hércules como tú 🤙🏽
sos crack amigo, me funciona de 10, es increible. GRACIAS!
Me salió ok 👌 gracias Bro, uno aprende bastante con estos detalles
Dime cómo le hiciste a mi no me funciona la animación del botón
Impresionante! Gracias!
La genialidad de qu eparezca que es facil increible gracias
Esta genial. Pero se te olvidó indicar que el efecto se activa en el :hover
@@nachorodber Asi es
Como lo haría con el método hover?
@@ricardoaguirre6391 No es método, sino el estado del botón... osea al poner el cursor sobre el, se pone en estado hover
Ah perfecto y para hacerlo de esa manera como lo realizo?
@@ricardoaguirre6391 En donde pone button::before debería ser button:hover::before
No sabía que se podían poner tantos colores en el gradiente.😅
Un aporte de última hora, si tienes otros eventos y animaciones en la misma hoja de estilos, y a eso le sumas el ponerlo como un input dentro de un formulario funcional que envía peticiones HTTP, a lo mejor se complica un poco, pero buen ejemplo y mejor explicación ✌
ummmm🤤 cada Short tuyo es un Banquete de Conocimiento.
Gracias, Adriel!
Tenes muy buen contenido. Te sigo 👍
Muchas gracias, Fede!
Eres un crack.
Dios que bien explicas, y eso que estoy en FP con el Visual Studio y me viene genial, gracias ❤
Gracias, Asua! 🤗
Midu tienes pensado hacer algun curso de css ?
Eres un mago
Estoy haciendo un BOOTCAMP Y he utilizado algunas de tus técnicas
Wow genial!!!
Crack!
Por una simple "," que no habia puesto entre los colores de gradiente, no funcionaba. Casi parto la pantalla del computador.
Una pregunta, como haría esto en un hbs?.
Sería seguir los mismos pasos?
Se puede conseguir ese efecto en otras cosas ademas del boton?
MAGO
craaaack!!! El messi del desarrollo web!
midu, por respeto a nosotros solo pido que no vuelvas a decir que no sabes css JAJAJAJAJAJAJAJ. Grande máquina!
Me defiendo. :D
Midudev el mejor!!
sabías que la manera más optima de escribir los colores es con los 6 carácteres en minúscula 😁
Brutal
Hola! muy bueno pero no puedo hacer que me quede con una clase en Wordpress para hcaer un CTA en el menu.
.menu-cta2 a {
{
background: black;
cursor: pointer;
border:none;
padding:16px 32px;
color: #fff;
font-size: 24px;
font-weight: bold;
position:relative;
border-radius: 12px;
}
button::before {
content:"";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linerar-gradient(
45deg,
red,blue,deeppink, blue,
red, blue, deeppink, blue
);
background-size: 800%;
border-radius: 10px;
filter: blur(8px);
animation: glowing 20s linear infinit
}
@keyframes glowing{
0%{
backgorund-position: 0 0;
}
50%{
background-position: 400% 0;
}
100%{
background-position: 0 0;
}
}
}
que estoy haciendo ma?
Muchas gracias
Party button 🎉🎉 midu es demasiao pro/master
Cómo hago qué funciones si mi código trabaja por label :(
por alguna razón me toma el width y height del documento y rellena todo el body xd
habia olvidado poner position relative en el padre por intentar hacerlo de memoria jaja
donde podemos tomar el codigo copy paste :D
esta genial a ver si lo puedo incrustar en un esp8266 en un webserver iot, ojala resulte :)
grande
Bárbaro!!!
crack
POR QUE EN VEZ DE VERLE SU CAROTA, NO PUSO EL EL DESARROLLO DEL BOTON -. - IGUAL BIIEN echo
No se hacerlo, osea pongo html y luegl css o todo en css
Likeable
Tienes cursos diplomados?
no se por qeu no agarra la animacion.... no pasa nada
no funciono xd
🔥🔥🔥🙏
God
Es infin: que mas?
Y.. donde se pone el hover?
ctrl + c en accion
se puede usar el ::before en estilos en linea en React? no lo he conseguido ni he encontrado información... he tenido que importar un .css
El ::before es una característica única de CSS y/o SCSS, así que no, no podrás conseguirlo en react de la misma forma
@@joelserrano2280 Cómo podría ser para React? he intentado varias maneras y no he podido
Boton gamer 😂
Como lo ejecuto, para que salga el boton mientros realizo todo esos procedimientos
Tengo el mismo problema q vos y otr duda tengo la app de celular y dice elegir idioma css seria c# o c++??
Donde aprendiste HTML?
Creando webs.
Se puede hacer el mismo efecto con tailwind?
Poder, se puede, pero no se podría sólo con las clases nativas del framework.
00:00
a mi no me sale el movimiento de rotacion que tiene solo con animation: glowing 20s linear infinite y el @keyframes glowing {...}. tengo el codigo tal cual. que hay que anadir?
Edit: al contenedor ponele position relative y z-index 0, con eso lo pude hacer funcionar
Te reto....ahora hazlo accesible para que realmente valga la pena.
Efectivamente, al ser una etiqueta button no tiene funcionalidad alguna (a no ser que lo hagas de forma síncrona, cosa que a día de hoy no se suele usar), debería ser una etiqueta input type=submit para que submitiese el contenido del form :D
Porque usas la pseudo clase :: before en lugar de ::hover?
Me pregunto lo mismo, si quisiera que la animación aparezca solo al pasar el cursor, bastaría con sustituir before por hover?
No tengo ni idea de qué se le pasará realmente por la cabeza, pero, respondiendo a tu pregunta, el hover es un evento únicamente para cuando tienes el cursos encima del elemento, mientras que el before sucede antes del contenido de cada elemento seleccionado, por lo cual son eventos diferentes, el código siempre va a estar para las necesidades de cada página/app y ningún código va a ser igual que otro, por lo que usa el que mejor se adapte a tus necesidades ;)
Para no agregar más clases. ::before es una pseudoclase que puedes agregar a cualquier elemento HTML, sin tener que crear la clase en sí.
alguien puede darme el codigo entero?