Proyectos de animación de botones CSS

1. INTRODUCCIÓN: Hola a todos. Yo soy Únete al Atajo. Y bienvenidos al emocionante curso sobre botones animados de Hobart CSS En esta clase, vas a sumergirte profundamente en el mundo de micro interacción construyendo 20 proyectos de animación de botones diferentes, todos usando solo transición y transformación CSS. Las animaciones de Hobart pueden parecer pequeñas, pero tienen un gran impacto en la experiencia del usuario Si eres un principiante tratando de subir de nivel tu juego CSS o una pila de Db buscando inspiración de diseño. Este curso es para ti. Cada proyecto es corto, práctico y está lleno de tres efectos de punta. Desde botones de crecimiento hasta pasteles deslizantes, iconos giratorios, efecto rebote y más Te pondremos manos a la obra con código CSS real y aprenderás a transformar los botones de abordaje en algo llamativo e interactivo. Sin bibliotecas, sin frameworks, magia CSS. Entonces, ¿estás listo para agregar algo de hilo de animación a tus diseños web? Saltemos y comencemos a codificar. 2. Efecto creativo de botón giratorio con css: Entonces este es nuestro primer proyecto usando propiedades de transformación CSS. No vamos a usar fotograma clave para animar el elemento. Entonces como puedes ver en este ejemplo, aquí creamos un botón. Si abro mi auto en este botón, aquí puedes ver un hermoso efecto de transición de botón. Entonces vamos a construir hoy en este proyecto. Así que vayamos al editor de código de isal Studio y veamos cómo podemos crear este proyecto Entonces como pueden ver, ya abrí mi editor de código isal Studio Y ya creo archivo TML llamado index dot TML. Además, creamos otro estilo de archivo punto CSS, y ya abro este sitio web usando mi servidor en vivo. Este es nuestro sitio web. Está completamente en blanco. Entonces volvamos al código de estudio de usuario. Al principio, dentro de mi etiqueta corporal, voy a agregar una etiqueta nCAT, A y un hashtag HI Dentro de esta etiqueta de Anca, voy a escribir hover Me. Entonces voy a saltar al estilo de archivo CSS estilo CSS. Ya vinculo este archivo con este documento de ESTEML. Aquí vamos a comenzar este estilismo. Al principio, voy a apuntar a la etiqueta corporal. Entonces dentro de la liss voy a asignar altura, altura, y voy a asignar 100 VH Quiero colocar la etiqueta de ancla en medio de esta página, así que voy a usar la propiedad. Las escamas de visualización justifican el contenido, Justifican el centro de contenido. Además, voy a usar align item, align items center. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador, como pueden ver, se centró el texto, centré la etiqueta de anclaje. Ahora voy a abrir mi navegador y mi editor de código lado a lado. Como pueden ver, aquí abrimos mi navegador y mi editor de código lado a lado para nuestra comodidad. Usando flexbox, centramos este elemento en medio de esta página horizontal y verticalmente Básicamente, no tiene nada que ver con la animación. Si quieres aprender flexbox y saludar, puedes inscribir mis otros cursos Ahora, vamos a darle estilo a la fuga. Quiero apuntar a este enlace usando su nombre de etiqueta A, y dentro de los cálices, primera propiedad, voy a usar decoración de texto, decoración texto, decoración de texto, ninguno, y voy a configurar este archivo Si configuro este archivo, como pueden ver, va a eliminar este subrayado del texto Después de eso, voy a asignar un color de fuente. Entonces escribe color, y voy a asignar color negro. Quiero usar la fuente de color negro para este ejemplo. Entonces voy a definir la familia de fuentes, familia de fuentes, y quiero usar fuente aérea, aérea. Después de eso, vamos a encender el problema Raf view y Waraph Entonces después de eso, voy a asignar tamaño de fuente tamaño de fuente, y quiero asignar 45 píxeles tamaño de fuente, 45 píxeles. Entonces quiero asignar Borde. Frontera. Quiero borde de pixel de combate sólido, sólido, y el color del borde también es negro. Negro. Entonces quiero definir el relleno. Añadiendo de arriba y abajo, voy a definir 30 píxeles y de izquierda y derecha, voy a asignar 80 píxeles. Por fin, voy a proporcionar la posición de este elemento, algún tipo posición relativa. Voy a establecer este archivo. Después de configurar este archivo, así es como se ve nuestro botón. Ahora, con el fin de crear un bonito fondo verde, necesitamos usar antes pseudo elemento Si no conoces ningún conocimiento sobre pseudo elementos, es permitirnos crear antes del elemento estiML, de lo contrario, después del elemento estimal usando CSS Entonces seleccionaré la etiqueta ancla y aquí voy a usar antes de p clase cero antes de d dentro del alias, aquí voy a usar una propiedad llamada content, content, y es un contenido vacío. Y para definir el contenido vacío, necesitamos usar códigos policías individuales. Después de eso, necesitamos definir la posición de posición y voy a usar absoluta. Además, necesito definir la posición inicial, así que voy a escribir lab cero y desde arriba también cero. Entonces ahora tenemos nuestro pseudo elemento antes y su posición es la esquina superior izquierda de este enlace Ahora mismo, antes de que psudoelement se coloque en la esquina superior izquierda de Ahora, agreguemos el color de fondo. Color de fondo en vez de usar verde, me gustaría ir con color amarillo. Ya copio un valor Higa para este color de fondo y lo voy a pegar aquí Va a devolver el color naranja. Y entonces voy a asignar altura a esto antes elemento positivo, altura, 100%, 100%, y también siguiente, voy a asignar wed también al 100%. Y voy a poner este archivo. Después de establecer este archivo, así es como se veía. Así que ahora puedes ver el elemento positivo antes apareciendo como color de fondo de esta etiqueta de anclaje, y también toma ancho y alto completo de este enlace. Pero el problema es este elemento, altura el texto de esta etiqueta ancla. Aquí no podemos ver la palabra Hoberm. Podemos arreglarlo fácilmente. Si paso, si uso este índice Z de propiedad, y si uso menos un valor, entonces establezca este archivo Ahora resuelve el problema. Este texto volverá a aparecer frente a este fondo naranja, y ahora necesitamos rotar este fondo y ahora necesitamos rotar amarillo en el sentido de las agujas del reloj desde esta dirección. Y necesitamos girarlo desde la esquina inferior del labio. Entonces primero, necesitamos definir el orgin de transformación desde qué posición quiero transformar esto antes del elemento positivo, Sandro type transform Oisin y voy a proporcionar el valor bottom leg desde Entonces voy a usar otra propiedad llamada transform, transform, y voy a usar rotate value, rotate dentro de los versos redondos, quiero rotarlo hasta -90 grados Después de configurar este archivo, es como se ve si roto este elemento -90 grados desde esa esquina y luego lo voy a agregar transición Transformación de transición, y quiero asignar una vez más para esta transición 1 segundo. Quiero hacer la transición de esta propiedad de transformación por 1 segundo, así que va a completar la rotación en 1 segundo. A continuación, necesitamos crear el selector Huber. Si me uber este elemento, entonces quiero rotarlo hasta cero grados. Para eso, aquí, voy a escribir. Primero, voy a seleccionar la etiqueta ancla, después voy a usar el selector Huber, clase HoberPosito, Hover Entonces después de eso, voy a seleccionar la clase antes de posito Entonces dentro del auto dice, voy a usar transformar propiedad otra vez, transformar, y otra vez, voy a usar el valor de rotación. Esta vez, quiero rotar este elemento hasta cero grados. Quiero decir que quiero mover este elemento a la posición original. Ahora, después de configurar este archivo, si hober sobre este enlace, se puede ver el resultado Como pueden ver, cuando calmo mi auto sobre este elemento, gira el elemento anterior cero grado. Entonces está funcionando. Pero el problema es que necesitamos ocultar este fondo naranja fuera esta caja fuera de esta zona fronteriza. Es muy sencillo ocultar este elemento. Para eso, necesitas ir a saltar al selector de ancla y aquí necesitas usar una propiedad llamada overflow. Desbordar aquí, y necesita configurar este archivo. Después de establecer este archivo, se puede ver el resultado. Básicamente se oculta el elemento fuera de esta zona fronteriza, pero si hober mi cursor sobre este elemento, se puede ver el resultado Esta vez, puedes ver este hermoso efecto de hoar, efecto botón Huber Este fondo solo es visible en el área anctg. Fuera del área anchtg, no es visible porque ocultamos este elemento Y si quieres cambiar la posición de esta rotación, sí, puedes. Déjame mostrarte cómo, pero antes voy a desrecomendar esta línea, porque necesitamos entender cómo funciona Ahora esta vez quiero rotar este elemento desde esta esquina esquina inferior derecha. Entonces en vez de abajo a la izquierda, voy a usar abajo a la derecha. Voy a fijar esta . Y ahora se puede ver cada vez que Hobe mis cartas están en este elemento, este elemento de color naranja gira desde la esquina inferior derecha Pero si cambio el valor de rotación, si lo hago 90 grados en lugar de usar -90 grados y luego este archivo, se puede ver el resultado diferente Esta vez, va a rotar este elemento de anti glaucois Entonces, si me salto mi auto sobre este elemento, se puede ver el resultado. Y si utilizo la propiedad overflow overflow hidden y la guardo de nuevo y coloco mi caror sobre este botón, puedes ver el resultado Entonces aquí cambiamos la posición de la rotación, si cambio el valor de este origen de transformación y valor de transformación. Entonces así es como podemos crear este hermoso efecto de botón hover sin usar animación, para usar propiedades de transición Usando transición y hover, podemos hacer muchas cosas Esto es para este tutorial. En nuestro próximo Tutorial, vamos a cubrir muchos proyectos de animación. Así que gracias por ver este video, Estén atentos a nuestro próximo Tutorial. 3. Efecto de botón de deslizamiento con css: Hola a todos. En este proyecto, vamos a crear este hermoso, bonito deslizamiento Heft Cuando coloco el cursor sobre este enlace, como pueden ver, un fondo desliza suavemente hacia este botón y es cubrir el fondo del botón Además, es el color cursi del texto del botón. Cuando me quite mi casa, de nuevo, vuelve a su propia posición. Veamos cómo podemos crear este hermoso Heft. Entonces como pueden ver lado a lado, abro mi editor de código z sto y mi navegador usando la extensión Live Server, y ya creo un documento TML llamado index dot TML Con eso, ya incluyo archivo CSS de estilo en esta página. Básicamente, vamos a crear un botón de deslizar Hoverifi Entonces al principio, en mi etiqueta corporal, voy a agregar una etiqueta de ancla, A, y el tipo héroe me ciernen Y voy a poner este archivo. Arriba para configurar este archivo, como puedes ver en mi página, por defecto, lo coloca aquí en la esquina de laptop. A continuación, necesitamos colocar este enlace en la mitad de esta página. Para eso, necesitamos saltar al archivo CSS de puntos de mosaico. Aquí, voy a seleccionar el body tag body luego dentro de las Maldiciones, voy a asignar altura a nuestro cuerpo Altura 100 VH, 100 vista altura del pie, y mostrar aquí voy a usar flex. Entonces justificar, contener, justificar contener centro. Y además, voy a usar otra propiedad llamada alinea alinea items center Y voy a poner este archivo. Después de configurar este archivo, así es como se ve. Ahora toma la etiqueta ancla horizontal y verticalmente a mitad de esta página. A continuación, necesitamos que este enlace sea más agradable. Para eso, apuntaré a esta etiqueta de anclaje usando su nombre de etiqueta A. Luego dentro del receso rizado, al principio, quiero quitar el subrayado de esta etiqueta de anclaje Para eso, voy a usar una propiedad llamada decoración de texto. Decoración de texto, ninguna. Después de eso, voy a asignar un color, color, y quiero volver a asignar un valor hexa, hashtag, 35, 14 y 35 Es de color púrpura. Entonces voy a asignar familia de fuentes familia de fuentes, y aquí voy a asignar área. Fuente aérea. A continuación, voy a asignar tamaño de fuente, tamaño fuente 40 píxeles. Después de eso, después de eso, voy a asignar frontera. Borde, quiero borde sólido de tres píxeles. Voy a usar el mismo coolor de borde como fuente. Copio el hexa Velo y lo voy a pegar aquí. Entonces voy a configurar este archivo. Después de configurar este archivo, así es como se veía. Ahora necesitamos agregar relleno en este enlace angular. Para eso, voy a escribir padding. De arriba y abajo, voy a agregar 40 píxeles y de izquierda y derecha, voy a agregar 80 píxeles. Voy a establecer este archivo. Después de configurar este archivo, así es como se veía. También necesitamos definir una posición. Posición y posición, quiero asignar relativa. Además, necesitamos asignar transición porque sin transición, no podemos animar este botón Voy a escribir transición y voy a sumar todos y voy a correr por 1 segundo. Paso uno y voy a poner este archivo. Después de establecer este archivo, así es como se veía. Ahora se ve muy bonito y ahora vamos a trabajar en Swipe Effect Entonces la idea detrás de esta esposa effet, necesitamos crear un pseudo elemento antes Eso ocupará todo el ancho y alto de este enlace. Entonces lo traduciremos fuera del enlace. Y si hober este enlace, entonces eliminaremos la translición Entonces va a regresar a su propio lugar. Ahora, vamos a crear el pseudo elemento antes del pseudo Al principio, voy a escribir, voy a poner la etiqueta de anclaje entonces antes. Luego dentro de la clase, primero, necesitamos crear un contenido vacío. Contener está vacío, y es un contenido vacío. Y así lo haremos en esta línea. Entonces necesitamos definir la posición, posición, y voy a asignar absoluta. A continuación, necesitamos colocar este elemento en la esquina superior del labio. Aquí voy a escribir lap t cero, top también cero, y voy a asignar altura, altura, 100% Ancho, 100%. Después voy a asignar el color de fondo, color de fondo, y voy a asignar el mismo color de fondo, así que pego este enlace este hexa V voy a configurar este archivo Después de establecer este archivo, como puedes ver, como puedes ver, nuestro pseudo elemento aparece encima del texto Huber Mi y es texto de barra Necesitamos usar el valor del índice Z para resolver el problema. Voy a asignar índice Z, y voy a pasar valor menos uno. Voy a establecer este archivo. Después de establecer este archivo, después de que configuré este archivo, ahora va detrás del texto, pero no es visible debido al color del texto y el color de fondo es el mismo. Y ahora vamos a crear este efecto de deslizamiento desde el final que será fácilmente hecho por la transición Entonces necesitamos mover este elemento desde la dirección XXs. Entonces voy a usar transform property, transform, y voy a usar translate X value, translate X, Translate x, y aquí voy a pasar. -100% Y voy a poner este archivo. Después de configurar este archivo, es como se veía. Ahora es ir más allá de la frontera. Ahora se mueve este elemento 100% labio lateral porque usamos menos ancho. Además, nuestro texto es visible debido al color de fondo blanco. Ahora cuando pase el cursor sobre este enlace, quiero que el pseudo elemento antes vuelva a su propio lugar También quiero cambiar el color del texto a blanco. Cuando pase el cursor sobre este enlace, así que voy a seleccionar este enlace, voy a crear el selector Hober en el rojo, ATAC, colon, antes Después dentro de la clase, voy a transformar, transformar, traducir X, y amnopas cero Esto significa que vuelve a su propio lugar otra vez. Además, quiero agregar un efecto de suavizado, así que en transición. Con eso, necesitamos definir el tiempo, así que voy a definir 1 segundo. Entonces después de establecer este archivo, cuando coloco el cursor sobre este enlace, como se puede ver de nuevo a su propio lugar otra vez Ahora necesitamos cambiar el color de fuente de este texto. Además, necesitamos ocultar el fondo fuera del enlace. Y es muy sencillo ocultar el elemento desbordamiento. Solo tenemos que ir y saltar a la etiqueta de anclaje, luego necesitamos usar la propiedad overflow overflow hidden. Y voy a sentar este archivo. Malestar este archivo, como puedes ver, oculta el elemento, el elemento positivo de proa. Y si salto mis autos están en este texto, como pueden ver, nuevamente, aparece esta diapositiva, está de vuelta a su propio lugar. Entonces el fondo es invisible fuera del ding, y además conseguimos el efecto que queremos. Y finalmente, vamos a trazar el texto coloreado. Entonces al principio, voy a seleccionar la etiqueta ancla, A, hover Entonces dentro del auto ***, si yo ho este enlace, quiero cambiar el color, color blanco. Voy a establecer este archivo. Entonces después de establecer este archivo, si pongo el cursor sobre este enlace, como pueden ver, vuelto blanco y también sucedió sin problemas porque agregamos transición todo en nuestra etiqueta de anclaje, transición todos Ahora entendemos el concepto de efecto de deslizamiento. Si quieres cambiar la dirección, sí, puedes. Se puede cambiar fácilmente la dirección. Puedes aparecer esta, esta diapositiva desde el lado derecho, también desde arriba e abajo. Ahora cambiemos la dirección. Quiero aparear este tobogán desde el lado derecho. Para eso, necesitas cambiarlo en una línea. Voy a duplicar esta línea y comentar la anterior. Este es para labio. Voy a escribir mi comentario lado de labios. Si cambio el valor, si lo hago positivo, entonces va a colocar este al lado derecho. Después de configurar este archivo, si vuelvo a mi navegador y caliente este, ahora se puede ver que viene de dirección opuesta, lado derecho de esta caja. Entonces así es como podemos cambiar la dirección. Espero que ahora te quede claro cómo podemos crear este efecto. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 4. Efecto sobre el desplazamiento del botón: Hola a todos. En este video, estaremos creando hermosos Haeffet Si coloco mis cartas sobre este botón, puedes experimentar este efecto Ha Entonces veamos cómo podemos soldar este hermoso efecto. Entonces como pueden ver, estamos en mi editor de código de estudio de resultados. Y aquí ya abrí mi anterior documento TML en Exot En nuestra etiqueta corporal, ya creamos esta etiqueta de anclaje. Además, nos vinculamos con el archivo CSS Style Dot. Y si salto al archivo CSS de estilo, entonces como pueden ver, ya alineamos estos elementos ancla horizontal y verticalmente medio de esta página sobre mí. Vuelvo a usar este código porque no quiero que nuestros proyectos sean muy largos. Y ahora voy a apuntar a este elemento ancla. Voy a escribir A, luego dentro de la propiedad ClivSF, voy a usar padding, padding, y voy a asignar 40 píxeles de arriba y abajo y 80 píxeles de izquierda y derecha Entonces voy a usar otra propiedad llamada familia de fuentes. Familia tipográfica, voy a usar sensorial. San Salk. A continuación, voy a quitar el subrayado, así que voy a usar la decoración de texto Decoración de texto, ninguna. Después de eso, voy a definir el tamaño de fuente. Tamaño de fuente, tamaño de fuente, y voy a definir 45 píxeles. Entonces voy a añadir un color a esta fuente. Algunos de ustedes usan color, y como color, voy a usar hexa valor 26, 26, 26, este código de color, tipo de gris oscuro Entonces voy a definir el espaciado entre las letras. Entonces quiero escribir espaciado entre letras, y quiero agregar espaciado entre letras de dos píxeles. A continuación, voy a agregar frontera. Borde Quiero agregar cinco píxeles y borde sólido, por lo que. Además, nuestro color de borde es el mismo color que la fuente, copia el código de color y lo voy a poner aquí. Después de eso, necesitamos definir la posición de posición relativa, y también necesitamos definir la transición. Transición y quiero hacer la transición por 1 segundo, uno es. Voy a establecer este archivo. Después de establecer este archivo, este es nuestro botón parece. Ahora necesitamos usar un pseudo elemento, y voy a usar antes pseudo Se nos permite crear un elemento antes que el elemento. Voy a crear el antes posado para seleccionar voy a, voy a apuntar al elemento A, colon, BF. Entonces dentro de la primera propia alivss voy a usar para crear un contenido vacío tipo content, CONTENT content y aquí voy a crear un Después punto y coma para terminar esta línea. Después de eso, voy a definir la posición. Posición, voy a usar absoluta. Entonces necesitamos definir la posición donde quiero poner este elemento, este elemento de contenido vacío. Quiero ponerlo, quiero colocarlo en ese lugar de esa esquina. Entonces desde arriba, voy a pasar cero y desde la izquierda, voy a pasar también cero. Entonces quiero definir con, y quiero usar el 100% de peso de este contenedor. 100%. También, voy a asignar altura, altura, también al 100%. Entonces necesitamos definir un color de fondo a este elemento. Fondo y color de fondo como color de fondo, quiero asignar el mismo color de fondo, así que copio este. Yo pego éste y además, voy a agregarle transición. Transición, quiero hacer la transición por 1 segundo, y voy a configurar este archivo. Después de configurar este archivo, así es como se ve nuestro elemento cover D text, y necesitamos usar el valor del índice Z para hacer APirDTT Ahora ya no puedes ver el enlace, ya el texto del enlace porque este elemento antes aparece delante de él y sabemos cómo resolver el problema usando el índice Z. Ahora hablemos de rotar campo. ¿Recuerdas rotar x con antes en nuestra sección anterior, ya aprendemos rotar x y rotar Y vds Usando rotar x, podemos rotar nuestro elemento a lo largo del Xaxis y usando rotar Y, podemos rotar el elemento a lo largo del eje Y. Déjame mostrarte eso. Si abro este sitio web, este es el ejemplo de rotar X. Si yo Su mi cursar en este elemento rotar x, se puede ver el resultado Así es como gira. Yo giro este elemento 80 grados y si lo giro 90 grados como puedes ver, y luego coloco mis autos sobre él, ahora a veces desaparece por completo el Si giro este elemento a 90 grados, lo hará valish de la misma manera si hober mi cursor en rotar Y elemento esta opción, como pueden ver, así es como demandó a este Esto es lo que hacen rotar X y rotar Y. Ahora volvamos al código. Aquí, voy a usar otra propiedad llamada transform, transform, y voy a usar el valor rotate X, esta, voy a rotar este elemento 90 dg grado. Voy a establecer este archivo. Después de este archivo, como puedes ver, desaparece el elemento porque como te dije, si giro este elemento a Xxs desde el grado xs 90, va a desaparecer Supongamos que este es el elemento. Si giro el elemento de la xs a 90 grados, como se puede ver, se desvanece el elemento Sólo se puede ver una sola línea. Entonces esto es lo que aplicamos en este elemento. Esto desapareció antes del psudoelemento. Ahora bien, si coloco mi Kara sobre este elemento, quiero volver a hacer que el pseudo elemento sea cero Para eso, voy a crear un Her selector s type y categ A, luego voy a crear un Her selector hover, luego voy a usar antes positoclass antes Entonces dentro de los alias voy a usar la misma propiedad transform, copiarla y pegarla aquí, pero esta vez voy a usar cero grados Voy a hacer que sea cero otra vez. Cero grados después de establecer este archivo, si vuelvo a mi navegador y mis tarjetas están en este elemento, como pueden ver, ahora vuelve a su propio lugar otra vez Rota el elemento a cero grados. Ahora se puede ver de nuevo, le altura el texto. Ser de una vez más transición, podemos experimentar esta rotación muy suavemente. También necesitamos cambiar el color del texto cuando pasamos el cursor sobre el enlace Tenemos que convertirlo en blanco. Entonces cuando apuntemos al enlace, lo contrario, pase el cursor sobre el enlace, caliente, luego dentro del receso de color, voy a cambiar el color de color y voy a hacerlo blanco Voy a poner estos cinco. A continuación, voy a mover este pseudo elemento un paso atrás. Entonces aquí, voy a escribir índice Z menos uno. Que el texto muestre delante el elemento. Después de establecer este archivo, si hober mis autos en este elemento, se puede ver el resultado Puedes experimentar esta transición. Si hober mis tarjetas están en él, gira el elemento a cero grados y también cambió el color del texto, y creo un hermoso efecto buttonhver ¿Y ahora qué? Si roto este elemento en YXS si creas otro elemento Posido usando Uter déjame mostrarte. Voy a duplicar esta sección y esta vez, voy a crear otro elemento arriba del elemento. Voy a usar el selector de Ater, después. Entonces esta vez, voy a rotarlo en YX. Y, 90 grados en YxS. Además, voy a copiar esta sección, ¿Du consigue esta sección? Esta vez, voy a colocarlo sobre Ater PositoGlass. Y también necesitamos cambiar el valor de rotación. Tenemos que hacerlo rotar Y. Y voy a configurar este archivo. Después de establecer este archivo, si hober mi Carter en este elemento, aquí puedes experimentar un hermoso efecto de botón Si calmo mi auto sobre este elemento, gira tanto el elemento Antes elemento también el elemento después de 920 grados. Por eso creó un hermoso efecto hover. Entonces espero que ahora te quede claro, cómo podemos crear este hermoso efecto de botón hover Así que gracias por ver este video. Estén atentos para nuestro próximo proyecto. 5. Efecto de brillo de botones: Hola a todos. En este proyecto, vamos a crear este efecto cuando pase el cursor sobre este enlace Aquí podrás experimentar este efecto. Ahora déjame mostrarte la demostración de nieve. Qué es exactamente lo que está pasando aquí. Cuando coloco el cursor sobre este enlace, puedes experimentar este resultado Después de Ella sobre este enlace, como pueden ver, cambió el color de fondo. Además, se puede notar que hay una línea blanca gruesa inclinada como 45 grados y ésta pasando el enlace al mismo tiempo cuando coloco el enlace y también cambio el color de fondo Vamos a lograr este efecto. Volvamos al editor de código del estudio del usuario. Como puedes ver, ya creamos TML nombre de documento índice punto TML dentro de nuestra etiqueta corporal, aquí escribe A y CTTaghber Entonces ya conecto un archivo CSS con ese estilo punto CSS. Y si voy salto al archivo CSS de estilo, como pueden ver, al principio proporciono altura en nuestra sección de cuerpo, luego usamos displayflakes, y justificamos el centro de contenido y Alinear en el centro para posicionar la etiqueta de anclaje en medio de esta página vertical y horizontalmente Ahora, al principio, voy a agregar un fondo gris oscuro, algún color de fondo ajustado. Y voy a usar un valor hexa tiene etiqueta Tiene etiqueta 22, dos, y voy a configurar este archivo Después de configurar este archivo, como pueden ver, esta vez cambió el color de fondo como de color gris oscuro. A continuación, voy a apuntar a esta etiqueta de ancla. Voy a darle estilo a este botón. Entonces escribe A, luego dentro del clivus primera propiedad, voy a usar toma decoración, decoración de texto Toma decoración, voy a usar no propiedad. Después a quitar el subrayado del texto, voy a asignar un color a este texto, color, y quiero asignar color blanco color blanco A continuación, voy a asignar familia de fuentes, familia de fuentes, y quiero asignar familia de fuentes Sans. Entonces voy a asignar tamaño de fuente. Tamaño de fuente, quiero asignar un tamaño de fuente de casi 40 píxeles, 40 píxeles. Creo que es suficiente para ello. Esto lo alteré. Así es como se ve. Ahora voy a agregar un borde, un borde sólido. Tipo de propiedad de borde de tipo, y quiero tres píxeles borde sólido, sólido. Entonces también, voy a asignar un borde coolorf el color del borde, voy a agregar color blanco, blanco, y voy a configurar este archivo Entonces voy a agregar padding, padding de algún tipo, padding. De arriba y abajo, voy a asignar 40 píxeles y de izquierda a derecha, voy a asignar 80 píxeles. Y voy a poner este archivo. Yo configuré este archivo, así es como se ve. Entonces voy a usar la propiedad de transición. Transición para transición, voy a asignar transición para todas estas propiedades así que todas, y luego voy a definir la duración de la transición, que es 0.3 segundos. Entonces voy a definir la posición posición relativa. Y voy a poner este archivo. Después de configurar este archivo, es como se veía. A continuación, quiero cambiar el color de fondo cuando pase el cursor sobre este enlace Quiero que sea de color rojo. Voy a crear un selector de hover, etiqueta de anclaje, colon hover Después dentro del colss, voy a cambiar el color de fondo algún tipo, color fondo, y voy a asignar rojo color ROJO Ahora precepto este expediente. Yo Yo Ella a través de este enlace, como pueden ver, ahora el color de fondo cambia a color rojo. Y ahora quiero crear la gruesa línea blanca. Y para eso, voy a usar antes pseudo elemento. Entonces voy a crear el pseudo elemento antes. Al principio, voy a apuntar a la etiqueta ka, luego, colon, y voy a empatar antes. Después dentro de los cálices, al principio, voy a crear un contenido vacío, contener dos puntos, y es contenido vacío Entonces quiero definir el color de fondo a este elemento. Color de fondo, y quiero asignar color blanco. Blanco. Después de eso, voy a definir la posición del pseudo elemento Soy posición tipo y esta vez quiero asignar posición absoluta. Entonces quiero colocar este elemento en esa esquina, esquina superior tardía. Desde arriba, voy a asignar cero y desde la izquierda, voy a asignar cero también. Entonces necesitamos definir dentro de la altura a este elemento. Para ancho, voy a asignar 100%, 100% y para altura, déjame asignar altura, voy a asignar 50 píxeles y voy a configurar este archivo. Después de configurar este archivo, así es como se ve. Este es nuestro pseudo elemento antes. Y ahora quiero moverlo hacia el lado izquierdo fuera del área de enlace. Para eso vamos a usar, voy a usar transform property, algún tipo transform transit X menos, quiero traducirlo hasta -100% Y voy a poner este archivo. Después de configurar este archivo, así es como se veía. Muevo esto antes pseudo elemento fuera de esta área, fuera de esta área de etiqueta de gato Y ahora quiero rotar este elemento 45 grados. Entonces aquí, voy a usar el valor de rotar, rotar. Y quiero rotarlo hasta 45 grados grados, y voy a sub este archivo Después de girarlo hasta 45 grados, así es como se ve nuestra línea. Ahora bien, si acodo mi auto en este botón, quiero mover esta línea hacia el lado derecho para obtener el efecto Además, necesitamos asignar transición para el efecto de suavizado. Voy a usar esta transición de propiedad, así que copio esta y la voy a poner aquí Ahora, voy a hacer algunos cambios cuando pase el cursor sobre el enlace en mi botón Quiero mover el elemento antes psudo. Para eso, necesitamos crear una etiqueta de anclaje selector, luego pasar el mouse, luego necesitamos usar el elemento antes psudoelement, antes Entonces dentro del auto dice: Oye, voy a usar transformar propiedad, transformar, traducir. Traducir, y quiero moverlo al 100%, no menos, positivo al 100%. También durante el botment quiero rotar los elementos uso rotar 45 D EG Ahora después de septifive cuando vagabundeo sobre mis autos están en este ling, ahora se puede ver este elemento moverse hacia el Y también se puede sentir la transición. Ahora necesitamos alturar el área sobrante, la zona sobrante fuera de la etiqueta de Anca. Para eso, necesitamos usar la propiedad overflow. Para resolver el problema, necesitamos saltar al selector de etiquetas Anca y aquí necesitamos usar una propiedad llamada overflow, overflow hidden. Después de establecer este archivo, ahora puedes notar que el pseudo elemento antes no es visible, pero si abro mi casa en él, puedes obtener el hermoso efecto Así es como podemos construir este proyecto. Espero que ahora te quede claro. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 6. Botón de escala de texto con CSS: Hola a todos. Una vez más, estoy de vuelta con un nuevo botón relacionado con el proyecto Efecto Hover En esta lección, vamos a crear este bonito Haffet y usaremos antes psudoeleina Así que vamos a saltar a esto es Studio editor de código y ver cómo podemos hacer eso. Entonces como puedes ver, estamos en mi editor de código is Studio, y como puedes ver, ya creamos el documento TML llamado index dot HTML Y en la etiqueta del cuerpo, Harry toma y corta etiqueta, y HearTypeH mí Entonces ya creo un archivo CSS de estilo y vinculo este archivo con el documento de tabla. Ahora, vamos a saltar a la pila CSS de estilo. Como puedes ver, cómo asignamos altura, estos playfiq justifican el centro de contenido alinear los elementos del centro Para hacer este elemento de anclaje centro de esta página horizontal y verticalmente. Ahora, vamos a darle estilo a este elemento. Voy a seleccionar este elemento usando su nombre de etiqueta A, luego dentro de los alias, la primera propiedad que voy a usar lleva decoración Toma decoración, no voy a usar ninguna. Entonces voy a usar otra propiedad llamada color, color, y voy a asignar un color de texto. Voy a usar algún tipo de colores gris oscuro para usar Haztag 26, 26, 26 Then I'm going to define la familia de fuentes. Familia tipográfica, voy a asignar Sansai. Entonces voy a definir el tamaño de fuente tamaño de fuente 40 píxeles. Después de eso, voy a definir border, border, y voy a asignar tres pixel solid border. Sólido y nuestro color de borde es Hatag y voy a usar el mismo color que uso para el color de fuente A continuación, voy a definir el relleno. Relleno de arriba y abajo, voy a definir 40 píxeles de izquierda y derecha, voy a definir 80 píxeles. Ahora voy a definir la transición. Transición, y quiero aplicar transición para Oop, y voy a definir el tiempo de transición 0.5 segundos Y también hay que definir la posición relativa a la posición. Voy a establecer este archivo. Después de configurar este archivo, es como se ve nuestro botón. Y ahora voy a usar antes pseudo elemento para crear nuestro efecto Entonces aquí voy a escribir. Primero, voy a seleccionar la etiqueta anti, después voy a usar antes selector de procedimiento ANTES, antes. Después dentro de la al ress primero, voy a agregar contenido, contenido, y voy a teclear O M. Así que dentro del curso sencillo, voy a escribir sobre mí. Después de eso, después de eso, voy a definir la posición, posición absoluta. A continuación, voy a definir el ritmo donde voy a poner este texto. Quiero poner este contenido en esa esquina. Voy a escribir desde arriba, voy a pasar cero y también desde la izquierda, voy a pasar cero egging Entonces voy a definir alto y ancho, alto, voy a asignar altura 100%, y también ancho 100%. Entonces voy a agregar color de fondo a este elemento, el elemento positivo. Voy a escribir color de fondo, y quiero asignar el mismo color, este color gris oscuro. A continuación, voy a asignar color de fuente, color, y voy a asignar color blanco porque necesitamos que sea visible en blanco. Y voy a poner este archivo. Después de configurar este archivo, es como se veía. En nuestros ejemplos anteriores, mayoría de las veces creamos un contenido vacío. Pero esta vez en esta teta, ponemos este texto sobre mí. Y ahora necesitamos colocar este texto en medio de este contenedor, vertical y horizontalmente. Para eso, voy a usar flex propriety, display flakes justificar el contenido, justificar el centro de contenido, y alinear align item también center, y voy a configurar este archivo Después de establecer este archivo, así es como se ve. Ahora quiero escalar este tiempo de lucha de fondo gris oscuro. Quiero hacer escala de ajuste desde su tamaño orizonal y hará que el elemento de fondo sea muy enorme También vamos a hacer que su opacidad sea cero. Entonces va a hacerlo transparente. Y cuando pase el cursor sobre este enlace, quiero escalar de nuevo. Quiero que sea una vez más. Con eso, también, voy a cambiar la oposidad. Voy a hacer que sea una vez más. Quiero que vuelva a visitarlo. Entonces hagámoslo. Al principio, voy a aplicar escala, algo de t, transformar, y quiero usar la escala de valor de habilidad, y quiero hacerla cinco veces. Después de configurar este archivo, así es como se ve. Lo hago mucho más grande que el anterior. Escala estos elementos de fondo cinco veces de su tamaño, pero quiero que se oculte fuera de este enlace. Aquí aquí dentro de este elemento ancla, voy a usar la propiedad overflow, overflow, overflow. Oculto, y voy a poner este archivo. Después de guardarlo, así es como se veía. Ahora puedes ver fuera del área de enlace, el elemento antes de pseudo parte está oculto Además, es necesario que este elemento sea totalmente transparente. Dentro del selector antes, voy a aplicar propiedad de opacidad, opacidad y voy a aplicar opacidad Si configuro este archivo, así es como se veía. Ahora el elemento de fondo V fore es completamente transparente. Además, no es visible en nuestra zona de desbordamiento. Ahora quiero aplicar transición. Aquí voy a probar la transición, y quiero aplicar la transición de toda esta propiedad, y voy a tomar 0.5 segundos. Voy a establecer este archivo. A continuación, al rondar, quiero hacer de este pseudo elemento uno Quiero reducir la escala de este pseudo elemento y también necesitamos aumentar el valor de transparencia Tenemos que hacerlo visible. Voy a escribir A, colon Heber, colon, y voy a usar antes de selector, voy a apuntar al elemento force antes de entonces dentro del Clses quiero aplicar la propiedad transform, transform scale, y quiero que sea uno También, voy a hacer Opa City Opacity, voy a hacerla una Quiero que sea completamente visible cuando pase el cursor alrededor de él y voy a configurar este archivo Ahora después de establecer este archivo, cuando coloco el cursor sobre esta etiqueta de anclaje, logramos el resultado deseado Este resultado. Espero que ahora te quede claro, ¿ cómo podemos crear este hermoso botón de va Hova eft Gracias por ver este video. Estén atentos para nuestro próximo proyecto. Nos vemos pronto. 7. Botón de intercambio circular: Hola a todos. Una vez más, estoy de vuelta con un nuevo botón relacionado con el proyecto Herefit. En esta lección, vamos a crear este botón de gran aspecto Haefet Como puedes ver cuando coloco el cursor, puedes experimentar este efecto Cuando coloco el cursor sobre este botón, un fondo rojo llena este botón desde la parte superior Entonces comencemos la práctica y veamos cómo podemos crearla. Entonces como pueden ver lado a lado, abro mi editor de código ist studio y mi navegador usando la extensión del servidor light, y ya creo un documento HTML llamado index dot HTML. Con eso, ya creo este archivo CSS de estilo punto, y vinculo este archivo CSS con este documento. Ahora, dentro de la etiqueta body, al principio, voy a crear una etiqueta de botón. Así que aquí voy a escribir botón de etiqueta botón, y también voy a asignar una clase clase y nuestro nombre de clase es el botón T en forma corta. Entonces sólo voy a escribir botón. Quiero establecer este archivo. Después de configurar este archivo, así es como se veía. Ahora necesitamos colocar este botón en medio de esta página. Para eso, tenemos que ir y saltar al archivo CSS de estilo. Primero, voy a seleccionar la etiqueta corporal, cuerpo. Después dentro del colss al principio, voy a asignar margen a esta página, margen, y quiero asignar margen cero, luego voy a asignar esta propiedad baja Mostrar escamas Justificar contenido justificar centro de contenido, también alinear los elementos centro t alinear elementos centro. A continuación, voy a asignar altura a esta altura de página y voy a asignar altura 100 H. Entonces voy a asignar FontonFamily, y quiero asignar fuente Sensory, Sanserith voy a Después de configurar este archivo, así es como parecía que alineaba este botón en medio de esta página horizontal y verticalmente. A continuación, voy a apuntar al botón usando su nombre de clase. Para eso, voy a escribir punto BTN. Entonces dentro de los colores, primera propiedad, voy a usar borde borde, y dobladillo para asignar dos píxeles borde sólido, acuarela sólida es tomento Voy a establecer este archivo. Después de eso, voy a quitar el fondo. Antecedentes, y no voy a asignar ninguno. Entonces voy a cambiar el color del texto. Soy tipo color y quiero asignarle color tomate egging. A continuación, voy a dar un poco de acolchado de arriba y abajo y derecha y levantar. Estoy tecleando relleno de arriba y abajo, voy a asignar 20 píxeles y de izquierda y derecha, voy a asignar 40 píxeles. Voy a establecer este archivo. Después de configurar este archivo, es como se ve. A continuación, voy a definir el tamaño de la fuente. Voy a escribir fuente, tamaño de fuente. Aquí voy a asignar tamaño de fuente 25 pixel. Después de eso, voy a usar una propiedad llamada transformación de texto, transformación de texto, transformación de texto en mayúsculas A continuación, voy a asignar otra propiedad, que es cursor, puntero de cursor. Cada vez que muevo el cursor sobre este botón, se va a convertir en un puntero. Después de eso, voy a asignar transición de transición, y quiero aplicar transición para toda esta propiedad y mi duración de transición es de 0.5 segundos. Entonces voy a configurar este archivo. A continuación, voy a definir la posición, posición voy a usar relaty Ahora, vamos a trabajar en el efecto de vuelo. Usaremos el pseudo elemento antes para eso y conocemos el proceso Ahora, vamos a crear el pseudo elemento antes. Entonces escribe punto BTN, botón, colon, B cuatro Después dentro de la probidad AlysSF, voy a usar contenido, contenido, y voy a crear Entonces voy a definir la posición de este contenido, posición, y estoy usando valor absoluto, absoluto. Quiero colocar este elemento en esa esquina. Desde arriba arriba, voy a asignar cero y también desde la izquierda, voy a asignar cero. Quiero iniciar el elemento desde la esquina superior izquierda. Entonces voy a definir dentro de la altura con el 100%. También, voy a definir altura altura, altura, 100%. Entonces voy a definir el fondo, fondo, y quiero usar tomate color toma. Voy a decir esto. Yo configuré este archivo, es como se ve. Entonces toma ancho y alto completo y está sentado encima de este botón. Por eso es altura nuestro texto. Para resolver el problema, voy a usar propiedad de índice Z, índice Z, y voy a usar menos uno y resuelve el problema, pero nuestro texto aún no es visible porque nuestro color de texto y el color de fondo coinciden entre sí. Dentro del botón seleccionado, si cambio el color, color. Y si lo hago blanco blanco, y luego pongo este archivo, es como se veía. Ya puedes ver el texto que aparece. Pero por ahora, voy a volverlo a hacer tomate. Entonces voy a comentar esta línea, y voy a volver a guardarla. Y ahora para lograr el resultado deseado, voy a usar radio de borde en nuestro radio de frontera tipo pseudo lemate, cero, cero, y 50% y 50% Desde la esquina superior izquierda y derecha, uso valor cero y para la esquina inferior izquierda e inferior derecha, aquí uso 50% y 50% radio de borde. Ahora bien, si configuro este archivo, es como se ve. Ahora tenemos las curvas en nuestro fondo, y ahora necesitamos trabajar en el efecto de flotación Ahora vamos a establecer la altura de este fondo rojo, cero. Después al pasar el cursor sobre el botón, aumentaremos la altura de este fondo rojo Te va a dar los rellenos y cubrir el efecto de botón. Dentro de este fondo rojo, voy a establecer altura, altura, y voy a hacer que sea cero. 0% en vez de 100%. Voy a establecer este archivo. Después de que configuré este archivo, como pueden ver, desapareció el fondo rojo. No es visible por su altura. Ahora necesitamos agregar efecto HVAD sobre este elemento antes. Para eso, voy a escribir punto BTN Colon Hal colon y Hemot antes Entonces dentro del carro lerss voy a definir la altura, altura, 100% Y voy a poner este archivo. Entonces cada vez que Ella mis autos en este botón, como pueden ver, aumenta la altura, pero aumenta la altura al instante. No hay transición entre ellos. Para eso, voy a usar la propiedad llamada transition en mi elemento Hard, transition en mi elemento posto Entonces Hemost transición aquí voy a establecer transición en todo este elemento todo y voy a definir el tiempo 0.5 segundo y voy a establecer este archivo Esta vez después de configurar este archivo, si coloco el cursor sobre mi color sobre este botón, ahora puedes ver el efecto de suavizado Puedes experimentarlo. Pero el problema es que no cubre todo el botón debido al radio del borde. Entonces, para resolver el problema, necesitamos aumentar la altura. Necesitamos aumentar más altura más del 100%. Entonces en lugar de usar 100%, ella voy a usar 190%, y voy a configurar este archivo Después de configurar este archivo, si estoy sobre mi cursor sobre este botón, se puede ver que resuelve el problema, pero crea un nuevo problema. Entonces necesitas caminar el área de desbordamiento para eso en mi botón en esta área de botón, voy a usar la propiedad llamada overflow, overflow heating voy a configurar este archivo. Si configuro este archivo y sobre mi cursor sobre este elemento, puedes ver aquí logramos el efecto deseante Oculta el elemento de desbordamiento. Ahora, también, tenemos que resolver otro problema. Tenemos que cambiar el color cuando coloco el cursor sobre este elemento. Tenemos que cambiar el color del texto cuando coloco este botón Para eso, aquí voy a crear otro selector BTN y ella crear un selector de hover de ello Dentro del color ss, voy a usar la propiedad llamada color. Color blanco. Quiero establecer este archivo. Después de establecer este archivo, si yo mis tarjetas están en este elemento, aquí se puede ver, logramos el resultado deseado. Espero que ahora te quede claro cómo podemos crear este hermoso efecto de botón. Así que gracias por ver este video. Estén atentos para nuestro próximo proyecto. 8. Botón de 3 capas giradas: Hola a todos. En esta lección, vamos a crear este hermoso efecto de botón Hover Como puedes ver cuando las cartas de I Hoberm están en este botón, aquí puedes experimentar un efecto de volteo Al principio, un fondo verde cubrió el botón, luego un fondo rojo cubrió el botón, y cuando suelto el mouse de él, volvió a su posición original nuevamente. Veamos cómo podemos crearlo. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión Lifesaver y ya creo un documento SML llamado index Con eso, ya creo el archivo CSS del azulejo Dod y vinculo este archivo CSS Tyled con este documento TML Ahora dentro de mi etiqueta corporal, al principio, voy a tomar una etiqueta Gut, A. Aquí sólo voy a decir botón. Y luego voy a poner este archivo. Establece este archivo, como puedes ver en mi navegador, esta es nuestra etiqueta de anclaje. Ahora, tenemos que saltar a este estilo o archivo CSS. Ahora, primero, necesitamos darle estilo a la etiqueta corporal. Aquí voy a apuntar al cuerpo usando su nombre de etiqueta. Entonces voy a asignar margen en nuestra etiqueta corporal, que es cero. Después de eso, voy a asignar propiedad de display, display, y aquí voy a usar slick Entonces voy a usar align item property, Alinear item center, justify content also center. Entonces voy a asignar altura a nuestra página altura 100 VH, altura de voto. Después de eso, aquí, voy a asignar un color de fondo. Color de fondo, y voy a usar un hexavalu 212121. Es de color gris oscuro. Si configuro este archivo, así es como se ve. Ahora necesitamos cambiar el estilo de fuente de este texto. Para eso, voy a usar familia de fuentes, familia fuentes, y voy a usar Sansai Sansai voy a configurar este archivo Después de configurar este archivo, así es como se veía. Después de eso, voy a darle estilo a esta etiqueta de anclaje usando su nombre de etiqueta A. Luego dentro del Closs, al principio, voy a asignar padding a este botón, así que escribe padding y desde arriba e abajo, voy a usar arroz de 20 píxeles y de izquierda y derecha, voy a usar arrozales de 40 píxeles Después de eso, voy a usar una propiedad llamada toma decoración, decoración texto, toma decoración. Él no voy a usar ninguno. Entonces voy a usar otra llamada de propiedad takes transform, text transform, takes transform, mayúscula Entonces voy a usar la propiedad de color dground. Color de fondo, y aquí voy a usar color de fondo, hass tag, si uno, C cuatro, cero F, este color amarillo variante, y voy a configurar este archivo Después de configurar este archivo, así es como se ve nuestro botón. A continuación, quiero cambiar el color del texto de este botón. Quiero que sea blanco, Pronto tipo, color, y quiero que su color sea blanco. Después de eso, voy a definir el tamaño de fuente tamaño de fuente, y voy a aplicar a la fuente t pixel. Entonces voy a configurar este archivo. Después de configurar este archivo, así es como se ve, pero quiero un poco de espacio entre letras entre estos caracteres. Entonces voy a usar el espaciado de llamadas a la propiedad. Permite espaciado, quiero pixel espacio entre los caracteres de esta palabra, sí, es bueno. Después de eso, voy a definir la posición de posición, y la voy a declarar relativa. Voy a establecer este archivo. A continuación, voy a crear el fondo verde que cubrirá el botón. Para eso, voy a usar antes de Posidoeleate. Aquí voy a atar la etiqueta de ancla colon antes. Después dentro de las calivas al principio, dentro de este elemento antes de Posido, voy a crear un contenido, contenido, y voy a teclear botón Después de eso, después de crear el contenido, necesitamos posicionar este contenido, algún tipo position property, position absolute. A continuación, voy a colocar este contenido en esa esquina. Para eso, voy a escribir desde arriba, voy a asignar cero y desde P y desde P, voy a volver a asignar cero. Entonces voy a asignar dentro de la altura. Voy a asignar ancho 100%, y luego voy a asignar altura, altura 100%. Después de eso, voy a definir el color de fondo. Color de fondo, voy a asignar el mismo color de fondo, así que voy a copiar y dobladillo asignar un color de fondo verde Voy a usar un hexa Valu tiene etiqueta dos CE, siete, uno. Este color de fondo verde, y voy a establecer este archivo. Después de configurar este archivo, así es como se veía. Ahora el fondo verde está sentado justo encima del fondo amarillo. Ahora necesitamos centrar estas tomas horizontal y verticalmente. Para eso, voy a usar display flex propriety, display y voy a usar flex y align align items center, justifique contenido También centro, también centro. Voy a establecer este archivo. Después de configurar este archivo, es como se veía. Ahora para crear el efecto, necesitamos usar la función rotate. Vamos a rotar este elemento verde lo largo de los Xxs así que aquí, voy a usar la propiedad llamada transform y voy a aplicar rotate X aquí, voy a pasar el valor 60 grados grados grados Ahora bien, si configuro este archivo, puedes notar que va a rotar este elemento verde en el eje horizontal. Después de configurar este archivo, se puede ver el resultado y éste giró hasta 60 grados. Como ya sabéis, por defecto, va a rotar el elemento desde la línea central. Pero quiero cambiar la posición de este punto giratorio. Quiero rotar este elemento desde arriba. Para ello, necesitamos usar una propiedad llamada transform as transform Aisin animal pass top Y trastornó este archivo, como puede ver, ahora es rotar el elemento desde la posición superior. Ahora quiero rotar este elemento hasta 270 grados. En lugar de usar 60 grados, voy a usar 270 grados grados y voy a configurar este archivo configurando este archivo como puedes ver, y trastornar este archivo, como puedes ver, es el elemento Ahora ya no es visible. Debido a que una rotación del elemento, va detrás del botón. Ahora cuando pase el cursor sobre este enlace, quiero restablecerlo. Quiero que vuelva a ser cero. Voy a crear un selector de hover usando la etiqueta de anclaje un hover antes Entonces dentro de la Caria dice, cómo usar una propiedad llamada transform, transform rotate X, y voy a pasar pasar cero grados cero grados Voy a establecer este archivo. Siempre que las curvas de I Hoberm estén en este elemento, este botón, como pueden ver, va a rotar este pseudo elemento verde a No puedes experimentar la rotación porque no usas ninguna transición en ella. Voy a escribir transición de propiedad de transición. Además, voy a fijar la duración de esta moneda de transición cero cinco segundos. Voy a establecer este archivo. Después de poner este archivo, si pongo mi Karza sobre él, ahora puedes experimentar esta transición Aquí podrás experimentar este efecto de dormir. Ahora después de crear el verde, quiero crear el rojo. Para eso, voy a copiar esta sección, esto antes pseudo elemento aquí voy a pegarlo de nuevo Y en lugar de usar antes del elemento posto, esta vez, voy a usar después del elemento posito, y esta vez voy a usar color rojo en lugar de usar ED verde Voy a establecer este archivo. A Quiero rotarlo después del verde. Para ello, necesitamos usar algún retraso de transición. Ty retraso de transición, y quiero retrasarlo hasta 0.25 segundos. Eso es bueno. Voy a establecer este archivo. Y de la misma manera, necesitamos volver al grado cero Wi en él en este botón. Para eso, aquí, voy a crear otra Su seleccionada para después de elemide A, colon rondado, colon, y Hentyp después. Después dentro del receso Cali, voy a aplicar este mismo valor y voy a sub este archivo. Después de configurar este archivo, Wi Hoberm cursor sobre este botón, aquí podrás experimentar este hermoso efecto de botón volteando Además si quieres obtener un resultado diferente, sí, puedes cambiar la posición de origen de la transformación. En lugar de usar T aplicas bottom, si aplicas butto bottom y luego este archivo, ahora puedes disfrutar de un efecto de volteo diferente Siempre que abro mi color sobre él, así es como cruza el botón. Por ahora, voy a usar Top. A mí me gusta ir con el top one al valor. Así es como se anima este botón. Espero que ahora te quede claro. Gracias por ver este video, estad atentos para nuestro próximo proyecto. 9. Efecto de botón de fondo 3 círculos. Parte 1: Hola a todos. Bienvenido al nuevo proyecto. En esta lección, vamos a crear este bonito bonito efecto de botón Ha. Como pueden ver, cuando coloco el cursor sobre este enlace, tres círculos que vienen y cubren dling luego un hermoso fondo amarillo aparece un hermoso fondo amarillo y cambia el color del texto Vamos a crear esto en este proyecto. Veamos cómo podemos crear este hermoso efecto. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Light, y ya creo un documento HTML nombre índice punto HTML. Con eso, ya creo el archivo CSS Styler y vinculo este archivo con este documento usando etiqueta de tinta Después dentro de la etiqueta corporal, primero, voy a tomar una etiqueta de ancla. Voy a tomar la etiqueta ancla usando A y luego voy a tomar una etiqueta span, una etiqueta span vacía dentro del span de etiqueta ancla, y dentro de esta etiqueta ancha, voy a volcarme. Veremos más adelante por qué necesitamos esta etiqueta span. Ahora, vamos a saltar al archivo CSS de estilo. Al principio, voy a darle estilo al tipo de cuerpo, entonces tipo, cuerpo. Después dentro del Cariss primero, voy a decir margen, voy a decir margen, cero de toda la dirección Entonces necesitamos alinear este centro de gato de esta página. Voy a tomar esta propiedad, display flex, Justificar contenido, justificar centro de contenido. Además, tenemos que pasar alinear Iams centro. Después de eso, necesitamos definir altura a esta página, altura y voy a definir altura cien V g, altura de voto. Entonces voy a definir el área de familia de fuentes familia de fuentes. Después de eso, voy a definir un color de fondo. Voy a usar un tipo de color de fondo oscuro, color fondo, hashtag, voy a usar un HiXavu Va a conservar un color gris oscuro. Después de configurar este archivo, así es como se ve nuestra página. También alineó el texto a mitad de esta página. Ahora necesitamos darle estilo a esta etiqueta de Anca. Voy a apuntar a la etiqueta ancha usando su nombre de etiqueta A, luego dentro del color sus primera propiedad voy a usar weed, y aquí voy a dejar de lado tenemos 220 pixel. Entonces voy a asignar altura, altura, 80 pixel. Entonces voy a asignar color. Voy a asignar color de fuente, color, ella para asignar color, tipo de matiz amarillo tiene etiqueta, F si cero. Va a volver de color amarillo, algo así. Entonces voy a definir el color de fondo. Color bagund, voy a hacerlo transparente. Éste. A continuación, voy a definir el tamaño de la fuente. Tamaño de fuente. Aquí voy a usar tamaño de fuente 26 pixel. También voy a quitar este subrayado, así que voy a escribir decoración de texto, decoración de texto Voy a hacer que no sea ninguno. Se va a quitar el subrayado. A continuación, voy a convertir este texto en mayúsculas, así que voy a escribir texto, transformar, mayúsculas Voy a establecer este archivo. Después de configurar este archivo, es como se veía. Y ahora necesitamos synta este texto horizontal y verticalmente Para eso, voy a usar una propiedad llamada text align text, align, text align centered. Por encima de eso, también, voy a definir alguna altura de línea altura de línea, 80, altura de línea, 80 pix. Entonces es Alinear el texto en medio de este contenedor. Aquí definimos ancho 220 píxeles y alto 80 píxeles. Por último, voy a agregar transición. Transición, voy a aplicar transición para todo el elemento y voy a establecer duración 0.5 segundos. Después de eso, necesitamos definir la posición. Posición, después de eso, necesitamos definir la posición, posición relativa. Y voy a poner este archivo. Después de que configuré este archivo. Ahora, vamos a crear estos círculos, que vienen del lado izquierdo y derecho. ¿Quién soy yo por este enlace? ¿Quién usará antes y después del pseudo elemento para crearlo? Quiero crear el primer elemento circular en ese lugar y quiero crear el segundo elemento circular en ese lugar. Voy a usar antes y después del elemento possudo juntos Entonces tipo A, colon, antes. A, colon después. Después dentro del Carrass la primera propiedad, voy a crear el contenido Voy a crear el contenido D. El contenido es un contenido en blanco. Voy a usar celda de doble código. Entonces necesitamos definir la posición de este contenido. Así que toma posición, voy a proporcionar absoluta. A continuación, necesitamos colocar esos contenidos. Desde arriba, voy a colocarlo 50% desde arriba, voy a colocarlo 50% y luego voy a definirnos, y voy a definir con 20 píxeles. También, voy a definir altura, altura, también 20 píxeles. Después de eso, voy a definir el color de fondo. Pero antes de definir el color de fondo, definamos el radio del borde porque necesitamos hacerlo circular. Radio de borde 50%. Entonces voy a definir el color de fondo. Color de fondo, voy a definir color amarillo, el mismo color, hass tag, do leaf, cero, y voy a configurar este archivo Ahora para establecer este archivo, se pueden ver los dos círculos. Uno es el lado izquierdo y otro es el lado derecho. Se hace por antes positoselector, y es hecho por ter Pero puedes notar nuestros puntos no están alineados con el texto. Aquí lo posicionamos desde el 50% superior. Quiero decir, el 50% de la altura de la etiqueta ca, que es de 40 píxeles. Pero para hacerlo correcto, necesitamos usar la propiedad transform. Transformar, y aquí voy a usar traducir Y con, traducir traducir Y, y aquí voy a usar -50% Hasta configurar este archivo, como pueden ver, alineó los puntos con el texto, y a continuación, voy a aplicar la propiedad de transición. Transición, transición, voy a aplicar transición a toda esta propiedad. A continuación, voy a definir la duración de la transición, que es de 0.3 segundos. Entonces ante un círculo superior perfectamente centrado a este texto. Ahora puedes notar el pseudo elemento antes cubriendo la letra H y el pseudo elemento por pseudo casi tocando la letra E porque no especificamos ninguna posición horizontal de la misma Para resolver el problema, voy a apuntar al pseudo elemento antes, pudo tipo A, dos puntos antes Después dentro del receso de llamada, voy a escribir el nombre de la propiedad tarde a la izquierda, cero y voy a establecer este archivo. Después de configurar este archivo, como puedes ver, es resolver el problema. Entonces voy a apuntar al elemento ara A, superior. Entonces dentro del receso Cali voy a colocarlo lado derecho a tizón derecho, cero Voy a establecer este archivo. Después de establecer este archivo, así es como se veía. A continuación, usando la propiedad de sombra de caja, vamos a crear sombra de estos círculos, y vamos a crear dos sombras de estos dos círculos Entonces voy a crear una sombra de caja para antes de elementos, así que voy a escribir box shadow, y va a excepto de cuatro valores. El primer valor es para la distancia horizontal entre la sombra y el elemento. Desde el lado derecho, voy a mover mover la sombra desde los diez píxeles. Quiero mover esta sombra desde el lado izquierdo, así que voy a usar -100 píxeles A continuación, necesitamos proporcionar la distancia vertical desde el elemento. A partir del elemento, quiero proporcionar distancia vertical cero y el tercer valor representa el desenfoque de esta sombra. Pero no quiero ningún valor borroso, quiero sombra corta, y el gran valor, necesitamos pasar el color de sombra y por ahora, voy a usar rojo de otra manera verde Entonces después de establecer este archivo, como puedes ver, aquí puedes ver un nuevo círculo. Es una sombra de esto antes pseudo elemento. Voy a hacer lo mismo por el pseudo elemento after Voy a crear la misma sombra solo para colocarla del lado derecho de este elemento. Entonces voy a copiar este lin y voy a pegarlo aquí. Voy a cambiar el valor de la dirección horizontal. Después de establecer este archivo, se puede ver el resultado. Ahora tenemos tal cuatro círculo. Esta es la primera parte de este tutorial. En la siguiente parte de este tutorial, vamos a trabajar en Haarefect Gracias por ver este video Syuned. 10. Efecto de botón de fondo 3 círculos. Parte 2: Un placer verlos chicos, esta es la segunda parte de este tutorial, y en nuestra parte anterior, ya creamos la sombra de este elemento de antes y después de Posito Ahora, trabajemos en el efecto Ha. Al principio, voy a crear Hor seleccionado para los elementos antes de ti anchor tag, hover colon, F. Luego dentro del caliss aquí voy a llamar propiedad Left, left 50% Entonces cada vez que coloco mis autos sobre este elemento, como pueden ver, va a mover este círculo el 50% de este elemento ancho También mueve esta sombra con ella, pero no quiero mantener la distancia de sombra al 100% donde flote sobre ella En lugar de usar -100, quiero acercarlo un poco más al elemento original Aquí voy a escribir box shadow box shadow, y voy a definir la posición de la sombra que es de 30 píxeles cuando flote sobre ella Y también, voy a pasar los mismos valores y el mismo color, así que voy a copiarlo y voy a colocarlo aquí. Voy a poner esto bien. Así que cada vez que salto el cursor sobre él, como pueden ver, ahora, la sombra se acercaba más a este elemento original. No sólo cerrar, cruzó el elemento e ir al lado derecho de este elemento original. Y también, voy a hacer lo mismo por el elemento After pudo. Entonces duplico esta sección y voy a reemplazar antes con After. A continuación, voy a cambiar de este lado. Voy a hacer el Laboratorio dos, bien. También necesitamos pasar el valor negativo aquí porque vamos a mover la sombra hacia el lado izquierdo de este círculo. Voy a establecer este archivo. Después de establecer este archivo, si hago el hobo en él, se puede ver el resultado Ahora tenemos que hacer una cosa. Necesitamos mover el pseudo elemento antes y superior a la misma posición El usuario puede ver solo tres puntos arriba hoberon él. Necesitamos alinear tanto el centro del círculo de este como el elemento categ Para eso, necesitamos usar transform property aquí, transform, y esta vez voy a usar translate X value, translate X, translate X, y aquí voy a usar -50% value Voy a establecer este archivo. Y como decimos traducir Y arriba aquí, necesitamos establecer el mismo valor en nuestro elemento en nuestro V para psudoelemento Aquí hay que mencionar que necesitamos mantenernos en -50% en dirección YxS, así que quiero pegar el valor Traducir Y -50%, y luego tenemos que hacer lo mismo para pseudo elemento superior Copio esta línea y la voy a pegar aquí. Y voy a cambiar los valores. Voy a hacerlo positivo, no negativo. Voy a establecer este archivo. Después de establecer este archivo, si arro mis autos están en él, sí, está funcionando, pero aros de los YxS aún necesitamos usar valor menos porque necesitamos alinearlo al centro Después de establecer este archivo, cuando me hooper mis autos están de nuevo en él, ahora se puede ver el resultado Ahora solo se pueden ver tres circuitos. Antes y el elemento positivo superior se superponen entre sí. Por eso aquí solo se puede ver un círculo. Ahora voy a cambiar el color de este círculo sado. Voy a usar el mismo color, mismo color amarillo para ello. En lugar de usar verde, voy a usar este color amarillo. Así que sustituyo el verde por este color cada vez, y voy a volver a guardarlo. Después de que dije este archivo, así es como se ve. Y ahora trabajaremos sobre el fondo amarillo usando esta etiqueta span. Como saben, cuando creamos nuestra etiqueta ancha, aquí creamos una etiqueta span dentro de ella, y ahora vamos a usar esta etiqueta span. Volvamos al archivo CSS de estilo. Voy a usar esta etiqueta gastada para el propósito de fondo. Entonces, para crear el fondo, voy a apuntar a esta etiqueta span usando su nombre de etiqueta de nombre. Span dentro del clivusus al principio, voy a definir la posición de su etiqueta span, que es absoluta Entonces voy a definir el lugar desde arriba, voy a colocar semilla cero. Y desde la izquierda, voy a colocar el set cero otra vez. Entonces voy a decir dentro de la altura, con el 100%. Y entonces voy a definir la altura, la altura también al 100%. Entonces voy a definir el color de fondo, el color de fondo, color de fondo, y voy a usar el mismo color de fondo, que es HataGFF cero, este color amarillo A continuación, voy a definir el radio fronterizo. borde, radio de borde, voy a usar ocho píxeles. Voy a establecer este archivo. Después de configurar este archivo, es como se ve nuestro botón. Ahora puedes ver el fondo amarillo sentado encima del texto, y luego voy a usar transform property, transform, y voy a usar scale value scale, y voy a decir scale zero. También, voy a usar transición transición, y voy a decir transición a todas las propiedades y también voy a decir la duración de la transición que es 0.3 segundos. Después de eso, voy a crear el Hoberselector de la etiqueta span, y nuestra etiqueta span está dentro la nctag voy a escribir primero voy a seleccionar NCTEGhver luego voy a seleccionar seleccionar Dentro del caliss voy a decir transformar escala de valor de escala, y voy a configurarlo esta vez voy a configurarlo uno y transformar delay, y luego voy a usar retardo de transición poco valor de retardo de transición Retraso de transición, y voy a fijarlo 0.4 segundos. Voy a establecer este archivo. Después de configurar este archivo, como pueden ver, por defecto, oculta el fondo amarillo. Pero cada vez que trato de mover mi auto en él, ahora se puede ver después de 0.4 segundos de retraso apareció el fondo. Como puedes ver, después de terminar este círculo moviéndose, aparece el fondo. A continuación, voy a cambiar el color del enlace cuando lo haga hobo. Para eso, voy a escribir ancla hover y dentro de las razas de color, voy a usar color fberty color, esta vez voy a usar color gris oscuro, así que voy a escribir tiene Entonces voy a agregar un poco de retraso de transición, y voy a usar el valor de retardo de transición de envío voy a copiar este y lo voy a pegar aquí. Entonces, si configuro este archivo y lo coloco sobre él, se puede ver que no pasa nada Es mirada como es porque necesitamos mover este fondo detrás del texto. Para eso, necesitamos usar el valor del índice Z para escribir el índice Z, que es menos uno, y voy a establecer este archivo. Así que establece este archivo cuando abro mis tarjetas están en él, se puede ver el resultado. Ahora el texto viene delante de este elemento de fondo. Pero el problema es que nuestras tres pudriciones también vienen delante del texto. Necesitamos usar el mismo valor de índice zen dos horas antes y después del selector de pseudo elementos. Éste. Aquí, voy a pasar el mismo valor del índice Z y establecer este archivo. Cuando me Obermgara sobre este elemento, esta vez se puede ver la resina Ahora, nuestro fondo y elemento de tres puntos también van detrás del texto. Entonces voy a establecer opacidad tanto del elemento cero. Déjame mostrarte opacidad, voy a ponerla a cero. Voy a establecer este archivo. Establece este archivo, como puedes ver, oculta todos los pseudo elementos, pero quiero reaparecer cuando me desplace sobre él Para ello, necesitamos establecer opacidad en nuestro selectón Su. Copia la opacidad del valor y en nuestro antes posidoHerSelector superior, voy a usar Voy a lograrlo. Esta vez, voy a convertirlo en uno Opacidad uno Voy a establecer este archivo. Esta vez lo hice completamente opaco. Después de establecer esta diapositiva si pongo el cursor sobre mi Karza en este enlace, puedes ver esta hermosa Su efecto. Así es como podemos crear este hermoso efecto de Su. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 11. Nuevo efecto de desplazamiento del botón: Hola a todos. Bienvenido a la nueva lección para este curso de animación. En este tutorial, vamos a crear este hermoso bonito botón Haifat Si miras este botón, puedes notar que tenemos un total de dos antecedentes aquí. Fondo de lo color y fondo de color violeta. Nuestro fondo de Eula se envió a la esquina superior y nuestro fondo de color violeta enviado a la esquina inferior derecha Y cuando flote sobre él, puedes notar tanto el fondo A rotar en perspectiva de tres D en la dicción Xxs Entonces veamos cómo podemos crear este hermoso Hoaiff. Entonces, como pueden ver lado a lado, abro mi editor de código Wiser Studio y mi navegador usando la extensión de servidor en vivo, y ya creo un documento SML llamado index dot HTML Con eso, creo este azulejo punto Css cinco. Ahora al principio dentro de la etiqueta body, voy a crear la corbata ancla usando A, luego voy a atar efecto buttonhver Efecto de botón Hover. Voy a establecer este archivo. Después de eso, necesitamos saltar al archivo CSS estilar. Al principio, voy a seleccionar el cuerpo de la etiqueta corporal. Entonces dentro de la primera propiedad de calibrados, voy a usar margin, margin zero from all of the direction Entonces voy a usar display. Mostrar y voy a usar display flex, y alinear elemento, alinear el centro de IMs. También, voy a escribir justificar contenido, también centro. Entonces voy a asignar altura a esta página, altura, y voy a asignar altura 100 V H, altura de ventana gráfica Entonces voy a asignar familia de fuentes, fuente, familia, y voy a asignar Al. Eso es bueno. Voy a establecer este archivo. Después de configurar este archivo, como puedes ver, aquí puedes verlo alinear el botón, medio de esta página horizontal y verticalmente. Ahora voy a darle estilo a este enlace. Para eso, necesitamos seleccionarlo usando la etiqueta de anclaje A y dentro de los hígados es la primera propiedad que voy a usar ancho Y la primera propiedad con la que voy a usar, y voy a asignar 300 píxeles de ancho. Entonces voy a asignar altura, altura, y voy a asignar 60 píxeles de altura. Después de eso, voy a asignar decoración de texto, decoración de texto, y quiero quitar el subrayado, así que aquí voy a usar ninguno Entonces voy a hacer este texto en mayúsculas, transformación de texto, voy a usar propiedad de transformación de texto y voy a usar mayúsculas Después de eso, también, voy a quitar el fondo. Voy a hacerlo transparente. Color de fondo transparente. Entonces voy a asignar texto alinear texto alinear centro. Entonces voy a asignar altura de línea, altura de línea. Aquí voy a asignar altura de línea, casi 60 píxeles. Creo que 60 pixel es bueno para cada uno. A continuación, voy a asignar el peso de la fuente. Necesito una fuente un poco más audaz, peso de fuente, y voy a pasar heredero negrita. Negritas. Después de eso, voy a agregar espaciado entre letras, espaciado entre letras y ella para agregar espaciado entre letras al píxel. Entonces voy a agregar posición, posición relativa, menos propiedad, voy a usar transición. Transición y ella para asignar transición a toda esta propiedad, también, voy a establecer la duración, que es 0.2 segundos. Voy a establecer este archivo. Después de que configuré este archivo, este es nuestro botón parece. Ahora, vamos a crear los dos antecedentes de este botón. Para eso, voy a usar el elemento fore y after posito Primero, voy a crear el elemento antes posito, Cctag colon Entonces pones los carlivorss. Primero, voy a crear un contenido en blanco. Aquí voy a escribir contenido, contenido, y voy a crear un contenido en blanco, así paso dobles núcleos. Después de eso, entonces voy a posicionar el contenido y voy a hacer que la posición sea absoluta. Entonces voy a colocar este contenido en esa esquina de ese lugar. Desde arriba, voy a pasar valor cero y desde tarde, también, voy a pasar cero, posición cero. Después de eso, voy a asignar con y altura. Nosotros, voy a asignar 100%, y luego voy a asignar altura, altura también al 100%. Entonces voy a asignar color de fondo, color de fondo, y me gustaría ir con color amarillo amarillo. Voy a establecer este archivo. Después de configurar este archivo, así es como se ve. Ahora puedes ver nuestro fondo amarillo tomar entero dentro de la altura de este elemento, el elemento catag Ahora, necesitamos mostrar este texto. Para eso, vamos a usar el índice Z. Entonces para escribir índice Z, voy a hacer que sea menos uno. Quiero mover este color de fondo amarillo detrás del texto. Entonces el sb este archivo, así es como se veía. Y ahora voy a cambiar este fondo amarillo, algo a la derecha y arriba. Para eso, voy a usar para valorar menos tres píxeles, también el valor de la izquierda menos tres píxeles. Voy a configurar este archivo después de establecer este archivo, como pueden ver, es mover un poco. Ahora, vamos a crear otro fondo. Voy a duplicar esta sección y aquí voy a pasar después. En lugar de usar antes voy a pasar un TR. Esta vez, quiero moverlo hacia el lado derecho. En lugar de usar menos tres píxeles, voy a usar tres píxeles. Además, voy a cambiar el color, el color de fondo, y voy a hacerlo Azul. Voy a usar este , azul violeta. Voy a establecer este archivo. Después de establecer este archivo, así es como se ve. Ahora puedes notar el fondo azul violeta sentado sobre el fondo de color amarillo. Pero quiero brd el fondo el uno con el otro. Para eso, podemos hacerlo fácilmente. Necesitamos usar una propiedad llamada mix brain mode. Aquí están el tipo mix Blain mode, y voy a aplicar multiplicar multiplicar, y voy a configurar este archivo Tenemos que aplicar el mismo modo de mezcla mixta, multiplicar en después del subelemento Y voy a poner este archivo. Después de configurar este archivo, es como se veía. Ahora en vez de feo color azul, quiero cambiar el color de la fuente. Voy a hacerlo blanco. Entonces en nuestra etiqueta de anclaje, voy a usar la propiedad de color color, y voy a hacerla blanca. Y voy a poner este archivo. Entonces puedes ver dos antecedentes mezclados entre sí y crea un bonito efecto hermoso. A continuación, vamos a trabajar en el efecto de flotar. Ahora en efecto de flotación, quiero rotar el elemento en dirección Xxs en tres entornos D. Para ello, primero, voy a seleccionar el hover select, anchor hover, luego antes del elemento psudo Después dentro de las rondas, dentro de las calibraciones, al principio, voy a mover el fondo amarillo al top six pixel Voy a usar el primer valor superior, y voy a hacerlo menos seis píxeles. Entonces desde el laboratorio, voy a hacer que sea cero. Y entonces voy a usar transform property, transform, y vamos a usar tres valores D. Y como saben, vamos a utilizar el entorno de tres D, por lo que necesitamos aplicar perspectiva al mismo. Perspectiva. Aquí voy a definir una perspectiva de 1,000 píxeles, no 100, voy a hacerla 1,000. Y luego voy a aplicar rotar x, rotar X, y aquí voy a definir, pero antes voy a encender la torre af, Wrap y Hem para definir el ángulo, que es de 75 dg grado. Voy a poner estos cinco. Y para una transición sin problemas, voy a aplicar la propiedad de transición en antes del elemento. Entonces escribe transición y voy a definir el tiempo para la transición que es 0.2 segundos. Voy a configurar este archivo de satisfacer. Si abro el cursor sobre él, puedes notar la transición. Puedes notar que nuestro fondo amarillo gira en entorno CD en la dirección XXs Tenemos que hacer lo mismo para el pseudo elemento superior, pero en dirección opuesta Pero puedes notar que este no es el resultado que queremos. Quiero rotar este elemento desde la posición superior, no desde la posición central. Entonces necesitamos cambiar el origen. Transformar origen, bueno déjame mostrarte. Entonces en nuestro elemento positivo castor, Imotype transforma origen, y quiero rotar el elemento desde la posición superior Voy a establecer este archivo. Si yo mis autos están en este elemento, ahora se puede ver, ahora se puede notar que esta vez gira el elemento amarillo desde la posición superior en tres ambientes D. Ahora necesito hacer lo mismo para el fondo de color violeta, pero antes voy a cortar esta sección y voy a pegarlo antes del selector de procedimiento. Voy a duplicar esta sección y voy a pegarla después del elemento after procedure. Simplemente voy a cambiar antes a después. También para comprar el puesto. En lugar de usar seis píxeles heromon para usar menos seis píxeles y en lugar de usar rotar 75 grados Heim para usar -75 grados y también usar las mismas propiedades como transición y transformar origen en nuestros pseudo elementos superiores Copio esto a propiedad y valor y HerramOptich. Y voy a cambiar la posición de origen de transferencia. En lugar de usar top, voy a usar bottom do bottom y voy a configurar este archivo. Después de configurar este archivo, si yo perm curs en este botón, se puede ver el resultado Aquí puedes ver el hermoso efecto, pero el problema es después de Hober en él, como puedes ver, nuestro texto color blanco coincide con el color de fondo Tenemos que resolver el problema cuando me hober en ello, necesitamos cambiar el color del texto de esta etiqueta de anclaje aquí voy a crear un Hbaselector de ancla a Her de ancla a Her entonces en los colses voy a usar propiedad de color, y voy a aplicar Voy a establecer este archivo. Después de establecer este archivo, si pongo el cursor sobre él, podrás disfrutar de este hermoso efecto de Su Espero que ahora te quede claro cómo podemos crear este hermoso efecto de botón Hover Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 12. Efecto de botón dividido: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado botón efecto Hova, hoy vamos a crear este hermoso botón Haefet Como pueden ver cuando vuelo el cursor mis autos están en este elemento cuatro elementos pequeños botón COD de cuatro lados diferentes, desde el lado izquierdo desde arriba, desde abajo y desde el lado derecho Esto es lo que hoy vamos a construir en este proyecto. Empecemos la práctica y veamos cómo podemos construirla. Entonces como pueden ver lado a lado, abro mi código de visual studio iter y mi navegador usando extensión de servidor en vivo, y ya creo un documento TML nombre índice punto HTML Además, creo un archivo css de estilo punto y vinculo este archivo con este documento. Después dentro de esta etiqueta corporal, al principio, voy a tomar la etiqueta ancla. Dentro de la etiqueta del cuerpo, voy a escribir A para la etiqueta de anclaje, y dentro de la etiqueta de anclaje, voy a tomar una etiqueta span, span. Después dentro de la etiqueta Span, voy a escribir sobre mí. Aquí agregamos esta etiqueta de pan porque queremos crear cuatro partes de fondo. Eso cubrirá del botón, y luego voy a configurar este archivo. Después de configurar este archivo, puedes ver el botón en mi navegador. Ahora, primero dos elementos vamos a crear usando antes y después del elemento psudo Entonces vamos a usar esta etiqueta de pan para crear otras dos. Vamos a saltar al archivo CSS de puntos de estilo. Al principio, voy a darle estilo a la placa body tag. Entonces dentro de la Cali, la primera propiedad voy a usar margin y voy a establecer el margen Z. Después de eso, necesitamos colocar esta etiqueta de ancla en medio de esta página Voy a usar Huber, voy a usar la propiedad, esta obra, y voy a hacerla flexible Después de eso, entonces voy a usar otra propiedad llamada align item, align item center, justify content, justify content, justify content also centered. Entonces voy a definir altura, altura, y voy a usar height 100 viewport height Después de eso, voy a definir la familia de fuentes. Familia de fuentes, y voy a usar la fuente aérea. A continuación, voy a definir un color de fondo. Voy a usar color de fondo oscuro, algún tipo color de fondo, hashtag, 222. Va a devolver el color de fondo gris oscuro. Y después de este archivo, así es como se ve. A continuación, voy a apuntar a la etiqueta de anclaje usando su nombre de etiqueta A. Luego dentro del receso de color primera propiedad, voy a usar decoración de texto, decoración de texto, y quiero eliminar el subrayado así que voy a usar la propiedad Nun NunVLU. Después de eso, voy a ponerla en mayúscula Voy a atar transformación de texto, texto, transformar. Quiero ponerlo en mayúscula. Entonces quiero definir el tamaño de fuente, tamaño fuente, y voy a hacer que sea de 25 píxeles. Después de eso, voy a definir un color. Voy a definir color a esta fuente, algún tipo de color, y quiero usar este código de color, hass tag, F six, B, 93b, este, este color amarillento, y voy a establecer Entonces voy a proporcionar espaciado entre letras entre estos caracteres. Entonces escribe, letras, espaciado y Heundpass de tres píxeles Después de eso, voy a definir algo de relleno. Necesito un poco de relleno. Pero antes de definir el relleno, agreguemos el borde. Borde para borde, quiero borde sólido de tres píxeles. Borde sólido de tres píxeles, y nuestro color de borde es el mismo que el color de fuente. Copo el código de color y lo voy a poner aquí. Después de eso, voy a agregar relleno. Relleno de arriba y abajo, quiero definir 25 píxeles y de izquierda y derecha, voy a definir 50 píxeles y voy a configurar este archivo. Después de configurar este archivo, así es como se ve nuestro botón. A continuación, voy a agregar transición porque necesitamos algún efecto suavizante. Voy a escribir transición. Quiero aplicar toda esta propiedad, entonces voy a establecer la duración 1.5 segundo. Después de eso, voy a definir posición, posición, voy a definir relativo, y voy a establecer este archivo. Yo configuré este archivo, voy a configurar este archivo. Ahora vamos a trabajar en la parte de proa de fondo ylow Cuando coloquemos el cursor sobre este enlace, va a encubrir este enlace Vamos a crear el primer elemento de fondo usando la etiqueta de anclaje. Vamos a usar antes y elemento actor para eso. Ahora voy a crear juntos tanto el pseudo elemento antes como el después Entonces Ti, A, colon, B puerto. Luego coma superior, Hemotipo A colon después. Después dentro de los calibres la primera propiedad que voy a usar, voy a crear un contenido en blanco Contenido, dos puntos es un contenido en blanco. Es un contenido en blanco. Después de eso, voy a definir la posición. Posición, voy a hacerla absoluta. Entonces voy a definir. Nosotros, voy a definir 25%. A continuación, voy a definir la altura. Altura, voy a definir la altura al 100%. Después de eso, voy a definir el color de fondo. Color de fondo, voy a usar el mismo color de fondo que utilizo para el color del texto. A continuación, voy a definir el índice Z para que sea visible el texto. Tenemos que mover tanto el fondo detrás del texto. Entonces voy a escribir índice Z, índice Z, y voy a usar menos un valor. Entonces voy a usar transición transición, y voy a definir transición para todo este elemento. Y también, voy a definir el tiempo de transición, que es de 0.5 segundos. Ahora para establecer este archivo, así es como se ven nuestros elementos. Recuerda, aquí usamos el 25% de ancho de este y cortamos elemento de etiqueta porque si sumamos cuatro elementos juntos, entonces va a cubrir toda el área. Por eso uso 25% para cada uno de los elementos. Ahora necesitamos mover esto antes del elemento posito. Primero, voy a apuntar al elemento antes Posido solo antes Entonces dentro de los caliberss, voy a usar propiedad superior, Y aquí voy a definir la posición desde arriba, voy a asignar valor cero. Entonces voy a definir la posición izquierda, P y aquí voy a pasar -25%. Y voy a sub este expediente. Después de establecer este archivo, así es como se veía ahora. Entonces esta es la posición inicial del elemento antes para este kata. Y ahora voy a cambiar la posición de este después de pseudo elemento Voy a colocar este elemento en esa posición. Para eso, voy a duplicar esta sección y en vez de usar antes, voy a usar después. A desde arriba, voy a pasar -100% Entonces desde la izquierda, voy a usar positivo 20%. Si configuro este archivo, aquí es donde queremos poner este elemento. Entonces cuando hober mi cursor sobre este botón, quiero mover el elemento antes hacia el lado derecho y quiero mover el elemento after al lado inferior Y va a completar el 50% del área. Ahora, vamos a caminar sobre el efecto Duro. Voy a primero, voy a crear un Hoefect para el elemento antes tipo A, colon Colón, voy a escribir el nombre del elemento antes. Entonces en el clirass la primera propiedad, voy a usar valor máximo, top, desde arriba, quiero ponerla cero cuando Hvar Quiero colocar el puesto y desde tarde y desde el laboratorio, también, voy a hacer que sea cero. Después de este archivo, cuando aguante mi color en él, va a mover este elemento dentro de esta caja Desde arriba, va a hacer cero y desde el laboratorio también va a hacer cero. Por eso lo coloca dentro de este elemento. A continuación, tenemos que trabajar en el efecto de libración del elemento superior. Tenemos que mover el elemento hacia abajo. Desde arriba, necesitamos posicionarlo cero y desde el laboratorio, necesitamos moverlo 25%. 25% del área fronteriza de la etiqueta nc. Voy a crear el selector de hover del mismo, algún tipo A, colon, hoval Después dos puntos, voy a seleccionar el elemento actor. Después. Entonces dentro de la clase desde arriba, voy a colocar cero y desde tarde, la voy a colocar 25%. Voy a establecer este archivo. Después de establecer este archivo, si pongo el cursor sobre este elemento, es como se ve Así cubrió el 50% de esta área de botones. Así que casi hemos terminado nuestro trabajo de hub. En la siguiente parte de este tutorial, vamos a crear las otras dos partes usando etiqueta span y antes del elemento positivo, y va a cubrir en las otras dos porciones. Gracias por ver este video, estén atentos para nuestra siguiente parte. 13. Efecto de botón dividido, parte 2: Hola, chicos. Encantado de verte de vuelta. Esta es la segunda parte de este proyecto, como puedes ver, ya creamos dos elementos usando antes y selector de posición superior del elemento ira Nuestro elemento antes se mueve hacia el lado derecho y nuestro elemento superior se mueve hacia abajo Y ahora necesitamos crear las dos partes restantes. Nuevamente, vamos a crear estos dos elementos usando antes y después del pseudo elemento Pero esta vez vamos a ser utilizados antes y después del elemento psudo de esta etiqueta span, que creas dentro de esta etiqueta nga, Vamos a llegar a la styler dice cayó de nuevo. Vamos a crear estos dos elementos. Vamos a saltar a esta sección y herm para agregar span colon befotm span Y voy a poner este archivo. Malestar este archivo, así es como se ve. Así que creamos con éxito estos dos elementos. Ahora necesitamos colocar los dos elementos. Para eso, primero, voy a seleccionar el span antes del elemento, y aquí voy a crear un selector del mismo. Palmo antes. Entonces es el tallador dice, aquí nos dirigimos a la etiqueta span antes del elemento, que está dentro del elemento ancla Entonces escriba A, espacio, lapso, dos puntos antes. Entonces necesitamos definir la posición desde arriba, top 100%. Se va a colocar este elemento debajo del botón, y luego necesitamos definir la posición correcta. Así que propina bien, 25%. Voy a establecer este archivo. Después de establecer este archivo, aquí es donde colocamos este elemento. Desde el lado derecho, se envió al 25% y desde arriba, se envió al 100%. la misma manera, necesitamos colocar el pseudo elemento after Duplico esta sección y esta vez, voy a apuntar tras elemento aer. Entonces en las cariras de la derecha, voy a hacerla -25%, y desde arriba, voy a decirlo cero Voy a establecer este archivo. Aquí es donde colocamos esto después del elemento. Entonces tenemos que trabajar en el selector Hover. Déjame mostrarte. Primero, voy a trabajar en el selector antes del elemento Hover Voy a escribir, ancla, punto, hover, entonces necesitamos seleccionar la etiqueta Span span before element, span, colon before Entonces dentro de los cálices cuando coloco el cursor sobre este elemento, quiero mover este elemento al lado superior aquí voy a escribir desde el valor superior superior superior cero Y también quiero decirlo valor correcto, correcto, valor correcto. Y para el dique, lo voy a usar 25% como está, 25%. Y voy a poner este archivo. A establecer este archivo, si me salto sobre mi cursor sobre él, se puede ver el resultado. Así es como movió este elemento al alza. Ahora necesitamos trabajar en este elemento, el elemento per psudo de esta etiqueta de pan Entonces copio esta sección y la pego aquí. Y esta vez, yo para seleccionar el elemento after, después. Entonces aquí, necesitamos definir la posición. Aquí solo necesitamos hacer que el valor correcto sea cero, y necesitamos establecer este archivo. Después de establecer este archivo, si pongo el cursor sobre él, se puede ver el resultado Es así como completa el fondo con los cuatro elementos diferentes. A continuación, necesitamos cambiar el color del texto cuando coloco el cursor sobre él. Voy a crear una Her selector de etiqueta de ancla, A, colon Her. Después dentro del proceso del auto, voy a usar color propiedad de color, y voy a asignar este color gris oscuro pero tiene etiqueta a dos. Voy a establecer este archivo. Después de establecer este archivo, cuando hober mi auto en este botón, se puede ver el resultado Y nuestro último deber es que necesitamos ocultar el área de desbordamiento fuera del área tecnológica de Anca. Para eso, tenemos que saltar al impuesto Anca seleccionado este, entonces aquí necesitamos usar el inmueble llamado desbordamiento. Desbordamiento oculto. Voy a establecer este archivo. Un conjunto de este archivo. Así es como poco y se ve como. Si coloco mi auto sobre este elemento, puedes ver el hermoso efecto O Espero que ahora te quede claro cómo podemos crear este hermoso botón Heft Gracias por ver este video. Estén atentos para nuestro próximo tutorio. 14. Efecto de desplazamiento del botón de cambio de bordes, parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relate nuestro proyecto Y hoy, en este tutorial, vamos a crear este hermoso botón ha ffect Entonces si yo Ella mis autos en él, puedes experimentar esta transición. Puedes ver que nuestro botón tiene cuatro bordes largos alrededor de él. Además, se puede notar que no tienen misma altura y anchura según el botón. Es un poco más largo que eso. Se puede notar el borde izquierdo y derecho hab mayor altura, y boerhb superior e inferior de mayor ancho Aprenderemos a hacer eso y a hacer esta transición. Así que vamos a saltar al editor de código de Visual Studio. Como pueden ver lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión if server, y ya creé un documento HTML llamado index dot TML Con eso, ya creo este archivo CSS de teselas y vinculo este archivo con este documento. Entonces primero, dentro de la etiqueta corporal, voy a agregar una etiqueta de anclaje, A, y tipo hemo hover Yo. Entonces voy a saltar al archivo CSS de estilo, y al principio, voy a darle estilo a la etiqueta body, body. Entonces en la primera propiedad Calif, voy a usar a Marji voy a decir margen cero desde toda la dirección Entonces voy a decir exhibición. Display, voy a hacerla flix porque quiero colocar la etiqueta ancha medio del discurso y heterotipo alinear elementos al centro También, voy a escribir, justificar contenido, justificar contenido también centro. Entonces voy a usar otra propiedad llamada height, height, y voy a asignar height 100 VH con viewfd height Entonces voy a asignar un color de fondo. Quiero asignarle color de fondo oscuro, así tipo herm, color de fondo, hastag 222, este código de color, color gris oscuro Y ahora voy a apuntar a la etiqueta ancla usando su tagnym A, y dentro de los alias, la primera propiedad voy a usar decoración de texto, texto, decoración, primero, voy a quitar el subrayado, así que voy a Entonces voy a convertir estos textos en mayúsculas hollin, texto, transformar Después de eso, voy a definir el tamaño de fuente tamaño de fuente 22 píxeles. Creo que hacer dos pixel es genial para ello, y voy a poner este pino. Entonces voy a cambiar la familia de fuentes familia de fuentes, quiero usar la fuente aérea. Aéreo. Después de eso, voy a definir el espaciado entre letras, espacio entre los caracteres, espaciado entre letras, y voy a hacer que sea de tres píxeles. También, voy a definir el color. Color, voy a hacer que sea de color amarillo, de lo contrario, color blanco. Creo que el color blanco es bueno para ello, el blanco. Después de eso, voy a definir altura y ancho, alto, alto, y quiero asignar 60 píxeles de altura. Entonces voy a definir con. Nosotros. También para la hierba, voy a usar 200 píxeles. Creo que es bueno para ello. Entonces voy a definir la altura de línea, la altura línea, y su altura de línea de asignar, 60 píxeles. Además, necesitamos alinear el centro de texto de esta página, así que escriba text align text align center. Voy a establecer este archivo. Ahora necesitamos definir borde, borde, y quiero usar borde sólido de dos píxeles, sólido, nuestro color de borde es por ahora, voy a usar creo que color azul. Creo que el azul es bueno. Azul. Entonces voy a definir la posición, posición relativa, y voy a establecer este archivo. Después de configurar este archivo, así es como se ve. Ahora necesitamos trabajar en la frontera larga que vimos en la oscuridad para averiguar cómo crearlos, necesitamos trabajar paso a paso. En primer lugar, para crear el borde izquierdo y derecho, usaré el pseudo elemento before Vamos a crear el pseudo elemento antes de esta etiqueta de Anca, A, dos puntos antes Y dentro de los calibrss primero, voy a crear el contenido en blanco Contenido, dos puntos, es un espacio en blanco, y voy a hacer en esta línea. Después de eso, voy a definir la posición. La posición es absoluta. A continuación, voy a definir con y altura. Altura, voy a hacerla 60 pixel, entonces voy a definir con Wi voy a hacerla 200 pixel. Voy a definir top position, top. Desde arriba, voy a colocarlo cero y desde la izquierda, voy a colocarlo cero también. Ahora puedes notar aquí te asignamos la misma altura y peso, que asignamos en nuestra etiqueta de anclaje. Hasta ahora, el pseudo elemento antes tiene el tamaño exacto de este elemento de encordia. Tiene altura similar y anchura similar. Si pongo este archivo, se va a sentar encima de él. Ahora voy a crear el borde izquierdo y derecho con él. Déjame mostrarte algún tipo bordeado, a la izquierda, y quiero botella de dos pixeles entonces es un borde sólido también sólido Entonces nuestro color de borde es, voy a asignar color rojo. Rojo. A continuación, voy a crear la frontera derecha. Borde, derecho, y hemo pasan dos píxeles, borde sólido, sólido, y nuestro color de borde es También quiero usar el mismo color de borde que uso para el texto Yo soy vuelo este. Ahora bien, si configuro este archivo, así es como se ve. Es un borde blanco y aquí se puede ver el borde rojo, y está sentado en el borde original de color azul. Por eso difícilmente los puedes ver. Ahora quiero hacer esta frontera un poco más larga. Voy a aumentar la altura de estas dos fronteras. Voy a aumentar la altura del pseudo elemento antes. Voy a hacer 90, y voy a poner esta pila. Ahora puedes ver ahora es mirada un poco más larga. Ahora los bordes son 30 píxeles más largos que nuestra altura anctag porque aquí asignamos 90 biixel Y ahora necesitamos alinear esta frontera a mitad de este contenido. Quiero dividir por igual el borde en la parte superior e inferior. Para eso, aquí, voy a usar solo valor superior. Voy a hacerlo menos fif ping. Entonces va a dividir el borde en la parte superior e inferior. Entonces voy a configurar este archivo, se puede ver el resultado. Entonces esta es la primera parte de este tutorial. En la siguiente parte de este tutorial, vamos a crear el borde superior e inferior. Así que gracias por ver este video. Estén atentos para nuestra siguiente parte. 15. Efecto de desplazamiento del botón de cambio de bordes, parte 2: Me alegro de verles chicos. Esta es la segunda parte de este tutorial y aquí en la sección, vamos a crear el borde superior e inferior. Vamos a saltar al estilo CSS spie. Aquí, voy a crear el pseudo elemento superior A a la tasa superior Después dentro de la Caris primero, voy a crear un contenido en blanco, contenerlo y alan content, después voy a definir la posición Posición, voy a pasar absoluta. Entonces voy a definir la altura, la altura. Aquí voy a assengn altura 60 pixel. A continuación, voy a definir, con, y voy a ascender con 230 píxeles, y luego voy a posicionarlo Desde arriba por ahora, desde arriba, voy a hacer voy a pasar cero y desde la izquierda, voy a pasar también cero. Entonces voy a asignar frontera. Bordeada Primero, voy a asignar borde superior, borde superior, y en la parte superior, voy a asignar dos píxeles, borde sólido, y nuestro color de borde es el peso. Entonces voy a definir otro borde para el borde inferior inferior. Borde inferior, borde sólido de dos píxeles y nuestro color de borde es blanco. Voy a sub este archivo. Después de establecer este archivo, así es como se veía. Ahora puedes ver que tenemos el borde superior e inferior, y es un poco más largo que el ancho de este botón. Como puedes ver, Hero está configurado con 200 píxeles, pero para el borde, tomamos 230 píxeles y ahora necesitamos enviar el borde hacia el lado izquierdo, poco. Tenemos que alinearlo al centro. Necesitamos alinearlo verticalmente. Para eso, en vez de cero, su pase negativo 15 pixel px voy a satisfacer este archivo, es como se veía. Y ahora ya no necesitamos este borde azul. Voy a esconder esta frontera. Voy a comentar esta línea y establecer este archivo. Se establecen este archivo, así es como se veía. Y ahora tenemos que trabajar en el efecto hover. Recuerden, cuando pase el cursor sobre esta línea, quiero cambiar el borde a sus caras Quiero darle forma al rojo superior a abajo y al rojo izquierdo uno al lado derecho, y esto se puede hacer muy fácilmente. Así que vamos a trabajar en el pseudo elemento hover. Vamos a crear el selector Her de elemento positivo diferido Así que ate, A, colon, hover, y luego colon, voy a atar antes Entonces en la calibración voy a usar transform Pooper transform, y voy a pasar rotar valor Y, rotar Y. Entonces quiero rotar este elemento 180 grados, 180 DG voy a establecer este archivo Voy a rotar el antes psudoelemento a Y Xs Si pongo el cursor sobre él, al instante, se puede ver el resultado Básicamente, va a voltear el YxSder para que suceda sin problemas, tenemos que ir dentro de este antes pseudo elemento y aquí necesitamos Tipo sumo, transición todo y nuestro tiempo es de 1 segundo. Obviamente este archivo cuando hober sobre este enlace. Como pueden ver, así es como cambió la posición. Básicamente voltea el elemento. Ahora puedes ver el borde cambiar la posición exactamente que queremos. Ahora necesitamos voltear el elemento after. Para eso, voy a duplicar esta sección y en vez de usar antes, voy a seleccionar después. Entonces dentro de los Cles aquí, voy a usar el valor rotate x En lugar de usar rotar Y, voy a usar rotate x y voy a configurar este archivo. Después de configurar este archivo, si sobre mi auto en este botón, se puede ver el resultado. Pero también necesitamos agregar transición sobre este pseudo elemento superior Copio este valor y propiedad, el mismo valor y propiedad, y lo voy a pegar aquí. Ahora bien, si configuro este archivo y quienquiera que sean mis autos en este enlace, aquí pueden ver el hermoso efecto de transición. Pero si quieres hacerlo más atractivo, puedes agregar poco retraso de transición en el pseudo elemento superior, algún tipo transición B, y quiero durar hasta 0.2, de lo contrario, 0.2 segundos Si configuro este archivo y los autos Herm están en él, ahora puedes notar después de mover la izquierda y la derecha, movió la parte superior e inferior, y crea un efecto hermoso Entonces espero que ahora te quede claro cómo podemos crear este hermoso efecto Hover Así que gracias por ver este video estatua para nuestro próximo estudio. 16. Efecto creativo de botón de borde creciente: Hola a todos. Bienvenidos a la nueva lección de este curso. En esta lección, vamos a construir otro botón genial HaiFTT uno Como puedes ver, este botón hab borde en esquina superior izquierda y esquina inferior derecha. Y cuando me huberm cursor, aumenta la altura y ancho del borde, y es sentarse en este hermoso botón Entonces veamos cómo podemos construir. Como pueden ver, lado a lado, abro mi editor de código salt Studio y mi navegador usando extensión de servidor Live y ya creé un documento TML para nombrar index dot html Con eso, también vinculo con archivo CSS de estilo y es un archivo vacío. Ahora, al primer punto índice StimlPage voy a crear un botón Aquí voy a escribir botón, y dentro de este botón, voy a escribir submit. Voy a archivos de conjuntos. Después de Sets file, así es como se ve. Entonces saltaré a mi archivo CSS. Estilo o CSS. Al principio, voy a apuntar a la etiqueta corporal, cuerpo usando su nombre de etiqueta. Después dentro de los alias, primero, voy a decir margen y voy a decir margen cero, y voy a decir margen cero, luego voy a definir la altura, altura, y voy a ponerla 100 H para altura A continuación, voy a definir display. Esta obra, voy a usar display flex. Después de eso, voy a alinear este ítem, alinear item center, justificar contenido, justificar contenido también centro. Entonces voy a definir el color de fondo. Color de fondo aquí voy a usar el hashtag 27, 2727. Voy a establecer este archivo. Hasta configurar este archivo, como puedes ver, este es el color de fondo gris oscuro. Además, alineamos este botón en medio de esta página horizontal y verticalmente. A continuación, voy a darle estilo a esta etiqueta de botón, botón tipo canción, botón dentro de los autos, primero, voy a definir frontera. Frontera, voy a ponerla ninguna. Entonces voy a definir padding padding. De arriba y abajo, voy a asignar 12 píxeles, y de izquierda a derecha, voy a asignar 40 píxeles. Después de eso, voy a definir el color de fondo. Color de fondo. Para el color de fondo, voy a buscar el color de onda. Color de onda y timón abren cualquier sitio web. Entonces de este color web, voy a escoger uno de los colores. Entonces me gustaría ir con este color salmón claro. Entonces copio el valor hexa de este color, y lo voy a pegar aquí Voy a establecer este archivo. Después volvamos al documento. Después de eso, voy a definir la familia de fuentes. Familia de fuentes, voy a usar cualquier fuente que puedas usar aerial. Entonces voy a definir el tamaño de fuente. Tamaño de fuente, voy a usar el tamaño de fuente de 22 píxeles. A continuación, voy a convertir este texto en mayúsculas, texto, transformar mayúsculas Además, voy a hacer que nuestro cursor apunte cuando salte el cursor sobre este botón. Entonces para escribir cursor, voy a hacerlo puntiagudo. También voy a posicionarlo. Posición, voy a hacer posición relativa. Voy a establecer este archivo. Después de establecer este archivo, así es como se ve. También, voy a asignarle poca fuente a la fuente. Necesito una fuente un poco más audaz aquí voy a asignar 700 y voy a volver a guardarla Con eso, voy a cambiar el color del texto color, smotype color, y voy a hacerlo blanco Voy a establecer este archivo. Diseñamos este botón con éxito. Ahora vamos a crear las fronteras. Primero, vamos a crear el borde en la esquina superior izquierda usando antes pseudo elemento, luego vamos a crear el borde en la esquina inferior derecha usando el elemento after psudo Para crearlo, básicamente, necesitamos crear una caja pequeña. Déjame mostrarte cómo. Aquí, voy a escribir botón, dos puntos, antes elemento. Antes. Después dentro de los colores, la primera propiedad, voy a usar contenido, contenido, y aquí escribo, voy a crear un contenido vacío. Después de eso, voy a definir la posición. Posición, voy a hacerla absoluta. Entonces voy a definir wd. Ancho, voy a hacer que sea de 24 píxeles. También, voy a definir la altura. Altura, voy a definirla 24 pixel. Después colocar la caja cuadrada en esa esquina en la esquina de la computadora portátil. Desde arriba lo voy a posicionar cero y del lado izquierdo, lo cero y del lado izquierdo, voy a posicionar de nuevo a cero. También, voy a definir un color de fondo, color de fondo, y por ahora, voy a definir color rojo, ROJO, que podamos entender la caja cuadrada muy fácilmente. Preestablece este archivo, así es como se ve. Ahora, si recuerdas, nuestros artículos fronterizos fuera de la zona. Afuera, quiero decir fuera del área de botones. Voy a enviar a la caja cuadrada, lept y poquito arriba Entonces voy a enviarlo negativo cinco píxeles, tipo menos cinco píxeles, cinco píxeles del laboratorio. Además, voy a usar el mismo valor para el top. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Ahora, después de enviarlo a cinco píxeles desde la parte superior y desde la izquierda, sale afuera de esta zona de botones. Ahora, agreguemos el borde superior e izquierdo. Entonces aquí, voy a usar primero, voy a usar borde superior algún tipo border, top. Quiero usar dos píxeles, borde sólido, y nuestro color inferior es exactamente el mismo color que usamos para el botón. Copia el valor de color valor, y voy a pegarlo aquí. Entonces voy a duplicar esta línea. Esta vez, voy a crear el borde del lado izquierdo, botella tarde. Yo uso el mismo borde y voy a configurar este archivo. Establecer este archivo, se puede ver el borde. En el lado superior y otro está el lado izquierdo. A continuación, necesitamos animar esta frontera. Quiero crecer cuando calme en mis autos en este botón. Podemos hacerlo muy fácilmente. Necesitamos aumentar la altura y el ancho de esta caja cuadrada. Vamos a crear el selector hober de este botón en el botón tipo, dos puntos, agujero, dos puntos, antes Entonces dentro del civuss voy a definir altura altura 100% También, voy a definir ancho, ancho 100%. Y voy a poner este archivo. Después de establecer este archivo, si coloco mi primo sobre él, se puede ver el resultado Pero necesitamos agregarle poca transición cuando coloco sobre ella porque al instante aumentó la altura y anchura de esta barra Aquí voy a usar propiedad de transición. Transición todos. Con eso, también, voy a definir el tiempo para esta transición que es de 0.25 segundos. Creo que es suficiente. Voy a establecer este archivo. Después de establecer este archivo, si salto mis autos están en él, se puede ver el resultado. Después de agregar la transición, después de configurar este archivo, si salto mis autos están en él, puedes experimentar esta transformación. Ahora, tenemos que quitar este fondo rojo. Solo necesitamos la frontera. Para eso, voy a comentar esta línea y voy a poner este archivo. Si configuro este archivo, puedes ver el resultado. Ahora tenemos que hacer lo mismo para la esquina derecha de la frontera. Para eso, vamos a usar hasta el elemento Posido. Voy a copiar esta sección y la voy a pegar después del selector Her. Entonces voy a primero, voy a cambiar antes después. Después de eso, voy a cambiar la posición. Primero, voy a cambiar de arriba a abajo, y luego voy a cambiar de izquierda a derecha. Después de eso, también, necesitamos cambiar border top to border bottom and border, left to border, right. Voy a configurar este archivo, y aquí se puede ver el resultado. Y de la misma manera, necesitamos crear el hover seleccionado para este elemento after Vuelvo a copiar esta sección y la voy a pegar aquí, y aquí voy a sustituir los cuatro con después. Voy a establecer este archivo. Ahora después de establecer este archivo, si bar mis tarjetas están en este elemento, logramos este resultado deseado. Harry logró este hermoso efecto de botón Hover. Espero que ahora te quede claro cómo podemos crearlo. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 17. Efecto creativo del botón giratorio de la primera letra: Hola, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo proyecto relacionado botón Haift en este proyecto, vamos a crear este hermoso botón Haift Como pueden ver, cuando las tarjetas I Hoberm están en este botón, puede notar que un fondo gira un poco También, incrementó el tamaño de esta primera letra, B, y también giró la letra B, 360 grados. Veamos cómo podemos crear este bonito botón Hari fit. Vamos a saltar al código del estudio. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor en vivo y ya creo un documento SML llamado index dot HTML Con eso vinculo este documento styler archivo CSS. Vamos a empezar a agregar una etiqueta Anca A y dentro del ncatag voy a tomar una etiqueta span span y dentro de la etiqueta span, voy a escribir mayúscula B que podamos animar esta letra por que podamos animar esta Después fuera de la etiqueta span, voy a escribir el resto de la palabra. Botón. Entonces voy a recargar mi navegador Ahora necesitamos alinear este botón en medio de esta página horizontal y verticalmente. Para eso, tenemos que ir a saltar al archivo CSS de estilo punto. Al principio, voy a apuntar a la etiqueta body, body the inside the cali vis primero, voy a definir altura, y voy a establecer height 100 viewport height Entonces voy a exhibir display lo voy a hacer escamas. Ap que voy a aplicar, justificar contener centrado. Entonces voy a escribir alinear elementos también centrados. Hasta eso, voy a definir la familia de fuentes de la familia de fuentes, y voy a usar la fuente Aerial, aerial. Y por fin, voy a esconder la zona de desbordamiento. Desbordamiento oculto. Entonces voy a usar el color de fondo. Para el color de fondo, voy a escribir Hashtag 22, este fondo gris oscuro. Voy a establecer este archivo. A continuación, voy a darle estilo a esta captura algún tipo A y dentro de la propiedad CarisSF, voy a usar decoración de texto Decoración de texto, voy a hacer que no sea porque quiero quitar el subrayado Después de eso, voy a definir mojado. Qué, hed set weed, 160 pixel. Entonces voy a asignar altura. Altura para altura, voy a asignar 60 píxeles. Y voy a definir color color, y quiero asignar texto color blanco. Después de eso, voy a definir frontera. Borde, y quiero usar, y quiero usar borde de color sólido de dos píxeles, borde sólido de color sólido de dos píxeles, sólido, y nuestro color de borde es blanco, Hastag si si A. voy a sub este archivo. Después de configurar este archivo, así es como se ve. Entonces voy a alinear el texto en medio de este contenedor. Entonces, para escribir texto align, text align center. Después de eso, voy a definir altura de línea, altura de línea, y quiero asignar altura de línea, casi 60 weixel creo que 60 píxeles es bueno Después de eso, voy a definir el tamaño de fuente tamaño de fuente, y voy a hacer que sea de 25 píxeles. Y voy a sub este expediente. Después de sub este archivo, así es como orbitan y se ven. Entonces voy a hacer que la posición sea relativa, y también voy a agregar transición. Transición, todo este elemento y nuestro tiempo de transición es punto cero algo dos segundos. Creo que es bueno para ello. Voy a sub este archivo. Ahora vamos a crear el fondo blanco. Al pasar el cursor sobre este enlace, va a rotar este fondo y lo usaremos antes de psudoelement Aquí voy a escribir ancha tag antes psudoelement. Antes dentro del calibre dice, primero, voy a crear un contenido en blanco. Contenido y quiero crear un contenido en blanco. Después de eso, quiero posicionarlo, posición, quiero que sea absoluto. Además, hay que colocarlo desde arriba, voy a pasar cero y desde tarde, también, voy a pasar cero. Entonces voy a definir con altura a este elemento. Voy a usar el 100% y la altura. Como voy a usar el 100% por ciento. Entonces voy a definir el color de fondo. Color de fondo, y quiero usar color blanco, este código de color. Voy a satisfacer. Después de satisfle como puede ver, cubrió todo el botón y ordene que aparezca el texto encima de él, necesitamos usar el índice Z. Índice Z menos uno menos uno, y voy a satisfacer. Ahora bien, debería ser invisible y cuando pase el cursor sobre este enlace, debería aparecer y desvanecerlo. También giró. Voy a decir opacidad cero y voy a transición transición, y voy a definir t 0.8 segundo A continuación, voy a crear un selector de hover de este elemento de diferencia Entonces aquí, voy a atar. Entonces aquí voy a atar nga tag, colon, Hal. Sobre selector. Entonces voy a apuntar al elemento antes antes. Entonces dentro del calibre dice: Aquí, cuando flote sobre él, quiero ponerle opacidad Voy a hacer de la opacidad uno. Quiero que sea totalmente opaca, no la transparente. Y luego voy a aplicar transform property, transform y quiero rotar este elemento. Pronto para escribir rotar. Transformar rotar y quiero girarlo, quiero rotar este 15 grados grados voy a configurar este archivo Después de poner este archivo, cuando sobre mi cursul puedes notar primero, va a hacer opaco el fondo blanco, el fondo transparente, luego va a rotar el elemento Entonces va a rotar el elemento de fondo 15 grados. Ahora después de eso, quiero cambiar el color del texto cuando sobrepase este enlace. Quiero que este texto sea de color negro. Para eso, voy a crear un selector de hover aquí voy a escribir Anca tag hover Después dentro de los colores, primera propiedad, voy a usar color. Color, voy a hacerlo blanco, y voy a poner este archivo. Después de configurar este archivo, si hbar mi cursor, lo siento, necesitamos hacerlo negro porque ya usamos color de texto blanco Voy a hacer que tenga etiqueta para hacer este código de color. Voy a establecer este archivo. Después de establecer este archivo, si pongo el cursor sobre él, se puede ver el resultado Ahora centrémonos en la primera letra B. Si recuerdas, cuando coloco el cursor sobre este botón, aumentó el tamaño de la primera letra, y como pueden ver, Harry puso la letra B dentro de la etiqueta span Voy a apuntar a esta etiqueta span. Aquí, voy a escribir A, dentro de esta etiqueta A, etiqueta ancla, voy a apuntar etiqueta span, span. Después dentro de los hígados, primera propiedad, voy a usar color, color, y voy a hacerlo transparente Entonces voy a proporcionar el puesto de posición y quiero que sea relativo. Ahora se puede ver que la primera letra ahora es invisible porque dijimos el color transparente. Por eso es invisible. A continuación, voy a crear el pseudo elemento before de la etiqueta span Aquí estoy tipo A, span, un span, el pseudo elemento antes Después dentro de la Clase, voy a crear contenido, contenido, y poner la letra tal B. Entonces voy a posicionarla posición, voy a hacerla absoluta. A continuación, voy a aportar color, color, y quiero colorear este color gris oscuro. Lo siento, uso color blanco, blanco. Y luego necesitamos usar la propiedad de transición. Transición. Y aquí, voy a hacer la transición. Y también hay que definir el tiempo de transición, que es de 0.2 segundos. Voy a establecer este archivo. Ahora, vamos a trabajar en el efecto Hard de esta etiqueta de pluma, Sandfoelement, algún tipo de etiqueta de anclaje, Hal, span, colon, BFO Después dentro del color resis primero, voy a cambiar el color cuando lo Hobar. Entonces escribe color, voy a hacer que sea de color oscuro 222. Entonces quiero aumentar el tamaño de fuente, algún tipo de tamaño de fuente, y voy a hacer que sea 80 pixel. Por último, necesitamos rotar tipo, transformar, rotar, y quiero girarlo 360 grados D EG, y voy a configurar este archivo. Así que establece este archivo si hober sobre mi cursor sobre este botón, como pueden ver, la primera letra B, rote 360 grados Pero el problema es, está encubierto las otras letras. Necesito moverlo poco que no oculte las otras letras. Con eso, voy a usar traducir propiedad, algún tipo, traducir Voy a enviar a lo negativo 65% de los XXs y negativo 10% de los YxS Después de configurar este archivo, si ho mi cursor sobre este botón, puedes experimentar este hermoso efecto de hover de botón Ahora se envía a los XXs -65% y y se envía al YXS -10% Por eso crea este hermoso efecto, pero qué efecto. Espero que ahora te quede claro cómo podemos construirlo. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 18. Efecto inferior de crecimiento de bordes de cuatro: Hola, chicos. Un placer verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto. Hoy en este proyecto, vamos a crear este hermoso efecto de botón hover Como pueden ver cuando salto mis autos en este botón, cuatro bordes diferentes cubrieron este botón. Veamos cómo podemos pujar. Como pueden ver lado a lado, abro mi editor de código Studio de usuario y mi navegador usando FSEreTensión, y ya creo un documento SML para nombrar Con eso, ya creo el archivo Stylod CSS y vinculo este archivo Styload CSS con este documento TML Ahora, al principio dentro de la etiqueta corporal aquí voy a crear una etiqueta de botón. Botón. Entonces también, voy a tomar una etiqueta span, span, y voy a configurar este archivo. Después de establecer este archivo, así es como se veía. Ahora, tenemos que saltar al archivo stylo CSS. Vamos a saltar a este archivo stylo CSS y empezar a diseñar. Al principio, voy a seleccionar body tag, body. Después dentro de la etiqueta body, la primera propiedad voy a usar margin. Margen, voy a asignar cero. Entonces voy a asignar display. Display, voy a hacerlo flex. A continuación, voy a asignar align item, align items centered. También moti justificar centro de contenido. Entonces voy a asignar altura, altura 100 VH altura de ventana gráfica Entonces voy a asignar familia de fuentes, área de familia de fuentes. A continuación, voy a asignar color de fondo, subtipo color de fondo Para eso, voy a usar color gris oscuro, tiene etiqueta 222, y voy a configurar este archivo Después de establecer este archivo, se puede ver el resultado. Ahora puedes notar que alineó el botón medio de esta página horizontal y verticalmente. Ahora apuntemos al botón. Después voy a seleccionar el botón. Así que para atar botón dentro del color resiste. Dentro del color resiste, la primera propiedad voy a usar color de fondo, color de fondo, voy a decir color de fondo rojo. El siguiente inmueble, voy a usar border, Border, y voy a quitarle todo el borde, así que voy a usar Nan Velu Después de eso, voy a posicionarlo. Posición, voy a hacerla relativa. Entonces voy a definir la altura de Wieden. Para la hierba, aquí voy a usar 400 píxeles y para la altura, voy a usar 120 píxeles. Entonces voy a convertir esta toma, el texto del botón en mayúsculas Tipo toma, transforma, toma transformar, mayúsculas. Entonces voy a configurar este archivo. Después de configurar este archivo, necesitamos aumentar el tamaño de la fuente. Voy a hacer tamaño de fuente tamaño de fuente, y voy a hacer que sea de 45 píxeles. Y voy a volver a guardarlo para ordenar el texto dentro del botón vertical y horizontalmente, voy a usar altura de línea. Altura de línea, 120 píxeles. También va a escribir centro de línea de texto. A continuación, voy a añadir color a este color directo y color, voy a hacerlo blanco. Con eso, voy a agregar espaciado entre letras. Espacio entre letras, voy a agregar 15 píxeles, y voy a configurar este archivo. Después de configurar este archivo, así es como se ve nuestro botón. Ahora, vamos a crear el borde superior, que viene en el lado derecho izquierdo Para eso, voy a usar antes pseudo elementos. Voy a escribir botón botón, dos puntos, y aquí voy a escribir antes. Después en las maldiciones, primero, voy a crear un contenido en blanco Contenido, es un contenido en blanco. Después de eso, necesitamos posicionarlo, posicionarlo, y voy a hacerlo absoluto. Entonces voy a definir dónde voy a colocar. Desde arriba, por ahora, voy a colocarlo cero desde la izquierda por ahora, voy a colocarlo cero también. A continuación, voy a definir el ancho. Ancho, voy a usar 100 personas. Después de eso, voy a definir la altura. Altura, pero para la altura, voy a usar cuatro píxeles, cuatro píxeles. Y también voy a definir el color de fondo, el color de fondo, y voy a hacerlo blanco. Voy a sub este archivo. Después de establecer este archivo, es como se ve nuestro borde. Básicamente, no es una frontera, es un elemento profundo. Ahora voy a mover este elemento, antes de pseudo elemento lap side Déjame mostrarte cómo. Aquí en vez de usar el valor b cero, voy a usar -100% Voy a establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora la línea se envió al lado izquierdo. A continuación, voy a agregar transición, transición a todos, y voy a sumar cero punto 0.5 segundos. Voy a establecer este archivo. Ahora, cuando nos enteramos de este botón, quiero retroceder el borde a su posición original. Entonces para escribir, botón, colon hover, colon, antes elemento, antes Entonces quiero mover este elemento ep al lado derecho, algún tipo, valor izquierdo, cero va a volver a su posición original. Después de establecer este archivo, si salto mi cursor sobre este botón, se puede ver el resultado. De la misma manera, quiero crear el borde inferior. Voy a ubicar toda la sección y en vez de usar antes, voy a usar Ara Entonces voy a cambiar la posición. En lugar de usar top, aquí voy a escribir bottom. Además, voy a mover este elemento del lado derecho. Aquí voy a pasar a derecha -100% y voy a poner éste Además, necesitamos hacer algunos cambios en el over selector en lugar de usar antes, voy a usar after en lugar de usar led value, voy a usar right. Voy a establecer este archivo. Yo configuro este archivo, si tengo mi Custer en él, se puede ver el resultado Ahora de la misma manera, voy a crear el borde del lado izquierdo y del lado derecho. Para eso, nuevamente, voy a seleccionar esta sección y copio y la voy a pegar aquí. Esta vez, en lugar de usar botón, voy a usar span. la misma manera, voy a crear el contenido vacío solo para cambiar la posición y luego la altura. Esta vez, voy a usar cuatro píxeles semana cuatro píxeles y altura 100%. Entonces voy a cambiar el valor máximo. En lugar de usar cero, voy a usar -100% Y entonces voy a cambiar let to right value, let to right. Voy a hacer que este valor cero, y voy a establecer este archivo. Después de establecer este archivo, aquí es donde ponemos este elemento. Ahora puedes ver que está sentado encima del botón, la línea sentada encima del botón. También, se puede notar. También puedes notar que lo reproduce lado derecho de este botón porque usamos la posición derecha cero. Ahora cuando coloques este botón, quiero volver a su posición original Quiero decir, desde arriba, quiero que sea cero. Entonces voy a crear el selector Her de este botón, así que para atar botón, colon hover, space, span, colon antes Después dentro del Carlss luego dentro del receso del auto, voy a usar el máximo valor, voy a hacer cero Desde arriba, quiero colocarlo en posición cero. Voy a establecer este archivo. Después de configurar este archivo, aquí se puede ver el resultado. Cuando abro mi auto sobre este elemento, se puede notar el resultado, como el pseudo elemento antes en lado derecho hacia abajo a su propio lugar Ahora de la misma manera, necesitamos crear el otro elemento para el lado izquierdo. Voy a duplicar esta sección, toda la sección, y en vez de usar antes, voy a usar después. Para crear el borde final, en lugar de usar top 100%, voy a hacer bottom. Fondo, 100%. -100%, en vez de usar right, voy a usar left y voy a configurar este archivo Después de que puse este archivo, aquí ustedes ven el resultado. Así es como lo creamos. Ahora, tenemos que moverlo al revés cuando mis cartas están en él. Para eso, en lugar de usar antes, quiero usar after element con Hover Effect En lugar de usar top, voy a usar bottom. Voy a poner el archivo. Después de configurar este archivo, se puede ver el resultado. Si abro el cursor sobre este botón, se puede ver que todos los bordes llegan a su lugar original al pasar el cursor sobre él Lo último que tenemos que hacer, tenemos que ocultar el área de desbordamiento. Tenemos que ocultar estas fronteras así que necesitamos usar desbordamiento oculto. Dentro de la cabeza del botón, voy a usar sobre pervertir Desbordamiento oculto. Además, voy a hacer transparente el fondo. Y voy a poner este archivo. Ahora después de configurar este archivo, si me subo mi cortador en este botón, se puede ver el resultado. Así es como podemos mover y extender todos los bordes desde los cuatro lados diferentes y creamos un hermoso efecto de botón Hover Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 19. Efectos de botones de corte: Hola, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo proyecto tate CSS button hover effect Y hoy en este proyecto, vamos a crear esta hermosa animación de botón de corte hover Aquí puedes ver dos cartas en la parte superior botter y botter inferior Y cuando lo coloco sobre él, como pueden ver, cubrió con color de fondo negro También, cambió con el color del texto. Entonces veamos cómo podemos construir este hermoso efecto de botón hover Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor en vivo y ya creo un documento TML llamado index dot HTML Con eso, ya creo un archivo de estilo namestyle dot CSS Vinculo este archivo con este documento. Después dentro de esta etiqueta corporal. Al principio, dentro de mi etiqueta corporal, voy a tomar una etiqueta de ancla. Entonces dentro de esta etiqueta de ancla, voy a tomar una etiqueta span. Span y dentro de mi etiqueta de anclaje tipo hemo botón. No etiqueta inferior, solo botón. Voy a establecer este archivo. Después de establecer este archivo, así es como se veía. Ahora tenemos que saltar al archivo CSS de estilo, y al principio, necesitamos alinear este botón en medio de esta página. Además, voy a cambiar el color de fondo. Aquí, primero, voy a darle estilo al cuerpo de la sección del cuerpo. Entonces en las calibraciones primera probidad, voy a usar la altura Voy a asignar altura 100 altura de ventana gráfica. Entonces voy a asignar esta probabilidad. Exhibir escamas. Justificar contenido, justificar contener centro. También alinee los artículos en el centro. Entonces voy a decir familia de fuentes. Familia tipográfica, voy a usar la fuente Aerial. Después de eso, me voy a esconder en el desbordamiento. Desbordamiento oculto. Voy a establecer este archivo. A para establecer este archivo, como puede ver, los alineamos con éxito, pero en medio de esta página. A continuación, voy a darle estilo a la etiqueta de ancla. A, luego dentro de los calibrados, la primera propiedad voy a usar decoración de texto. Decoración de texto, quiero quitar el subrayado, así que quiero decir ninguno Eso voy a establecer con 160 píxeles. Entonces voy a establecer la altura, altura solo 60 pixel. A continuación, voy a usar el color. Color y aquí, voy a establecer color negro. Después de eso, voy a decir altura de línea. Línea, altura, voy a ponerla 60 pixel. Entonces voy a alinear el centro de texto de este botón tipo texto alinear texto alinear centro. Después de eso, voy a hacer que se capitalice. El texto capitaliza algún tip text transform, text transform, voy a hacer que se ponga en mayúscula A continuación, voy a definir el tamaño de la fuente. Tamaño de fuente, voy a hacer que sea de 25 píxeles. Después de eso, voy a definir la posición de la misma, posición, voy a hacerla relativa, y para la suavidad, voy a usar propiedad de transición Transición, todo el elemento y nuestro tiempo de transición es de 0.2 segundos. Voy a establecer este archivo. Después de configurar este archivo, es como se ve nuestro botón. A continuación, voy a apuntar a la etiqueta span que está dentro de la etiqueta de anclaje, sub tipo A, span. Entonces dentro del auto avases voy a definir la posición Posición, voy a hacerla absoluta. Después de eso, voy a definir el ancho ancho 100%. Entonces voy a definir la altura, la altura también al 100%. Después de eso, voy a definir la posición. Quiero colocarlo en la esquina superior superior izquierda, algún tipo por valor máximo, voy a pasar cero. Para tarde, voy a pasar también cero. Entonces voy a definir un color de fondo. Color de fondo. Por ahora, voy a usar el color rojo. Creo que por ejemplo, entonces voy a definir la frontera. Borde, y quiero usar dos píxeles, dos píxeles, y nuestro borde es sólido boder Solid Borde sólido. Sólido, y nuestro color de borde es negro. Voy a establecer este archivo. Después de establecer este archivo, así es como se veía. Básicamente, no quiero este fondo rojo, solo quiero el borde, así que voy a comentar este león, no lo necesito. Voy a establecer este archivo. A continuación, necesitamos crear los esquejes que existen arriba y el borde inferior, y vamos a usar antes pseudo lamin para crear Aquí voy a atar span colon antes antes de pseudo elemento Entonces dentro de los lorss la primera propiedad, voy a usar contenido El contenido es un contenido en blanco. Ahí voy a definir la posición. Posición, voy a hacerla absoluta. Después de eso, voy a definir ancho, Ancho, aquí, voy a usar ancho de ocho personas. 8% de este botón. A continuación, voy a definir altura, altura, y voy a aumentar la altura, así que voy a usar 500% 500% de esta altura de botón. A continuación, voy a definir un color de fondo. Color de fondo, voy a usar rojo color rojo. Y voy a poner este archivo. Después de establecer este archivo, así es como se ve. Ahora voy a centrar este elemento metror de este botón Para eso, voy a pasar a valor, top, y voy a pasar el 50%. A continuación, voy a definir la posición de los labios, p también 50%. Entonces voy a usar transform property, transforme voy a pasar traducir valor, traducir y -50% Para XX y para xs -50%. Voy a establecer este archivo. Acepto este archivo. Así es como se veía. Alineamos con éxito este elemento en medio de este botón. Ahora el dground rojo está centrado dentro del botón. Pero el problema es que está frente texto y quiero que el texto aparezca frente al mismo. Voy a saltar al selector de span y aquí, voy a usar índice Z, índice Z, voy a pasar menos uno negativo, y voy a configurar este archivo. Este archivo, como puedes ver resuelve el problema. Entonces para lograr el efecto de corte, voy a rotar este elemento. Aquí voy a escribir, rotar, y voy a rotarlo hasta 60 grados, voy a sub este archivo Creo que lo voy a rotar y lo voy a rotar en direcciones opuestas, así que voy a hacerlo -60 grados y después de establecer este archivo, se puede ver el resultado Giramos este elemento en sentido contrario a las agujas del reloj. Ahora, vamos a trabajar en el efecto de flotar. Cuando pase el cursor sobre este enlace, quiero extender el ancho de este elemento rojo Quiero que sea 100% en vez de 8%, que vamos a tapar el enlace por completo. Pero antes en mi etiqueta span, voy a agregar transition all transition all y voy a agregar 0.22 segundos Después de eso, voy a crear un selector de hover arriba antes de gastarlo Un colon flotando. Espacio, lapso, entonces voy a atar colon, colon antes. Después dentro de los calibrados. Primero, voy a extender la hierba, si coloco mis autos sobre ella. Nosotros, algunos establecidos con 100 perse. Después de eso, voy a cambiar el color de fondo. Color de fondo, voy a hacerlo negro. Ahora, después de configurar este archivo, si coloco el cursor sobre este enlace, puedes ver el resultado Se extendió hasta el 100%, además, hazlo negro cuando flote sobre él. Debido a este color negro, ya no podemos ver el texto. Cuando flote sobre este enlace, quiero que sea blanco Voy a atar ancla flotando. Entonces dentro del color ress voy a hacer el color blanco. Voy a establecer este archivo. Después de configurar este archivo, si coloco mi color sobre él, puedes ver el resultado Con eso, al flotar, quiero rotar este fondo rojo Quiero hacerla 60 grados cuando flote sobre ella. Positivo 60 grados. Voy a copiar esta línea y voy a pegarla aquí. Voy a cambiar 60 grados negativos a 60, positivo 60 grados y voy a establecer este cinco. Siempre que flote sobre este enlace, como pueden notar, la raíz de fondo rojo a 60 grados Y lo único es tarde, necesitamos cambiar el fondo rojo y tenemos que hacerlo blanco. Por ello, vamos a lograr estos dos cortes. Voy a saltar a la sección de antes de elementos y voy a hacerla de rojo a blanco. Voy a establecer este archivo. Después de establecer este archivo, aquí puedes notar los esquejes. Además, voy a saltar al selector anctag, y aquí Voy a decir que se desborda, desborda el calor. Desbordamiento atómico oculto, si configuro este archivo, como pueden ver, creo que hay un problema con él porque creo que, sí, necesitamos usar el tamaño de la caja. No utilizamos el tamaño de la caja para eso. Voy a usar el selector universal estrella y dentro del cuadrado dentro de la Calibra aquí, voy a escribir tamaño de caja Dimensionamiento de caja boerbx. Si configuro este archivo, puedes ver el resultado. Ahora tenemos a estos dos cortando mi botón interior. Si le guardo mis curas, se puede ver el resultado. Así es como anima este botón. Básicamente aumenta el ancho de este elemento antes. En lugar de 8%, lo aumenta hasta un 100% y proporciona este hermoso efecto de botón de libración Espero que no sea un lirio para ti. Gracias por ver este video, estad atentos para nuestro próximo proyecto. 20. Efectos de desplazamiento de botones en 3D en CSS 3D puro: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro proyecto. Y hoy en este proyecto, vamos a crear este hermoso efecto de botón hover Vamos a construir este efecto de hover de tres botones D. Como pueden ver, hay un botón. Si Yo Su mi cursor sobre ella, se puede ver el resultado. Aquí puedes ver la parte opuesta de este botón. Da la vuelta al botón y devuelve un nuevo sabor. Haga clic aquí. Es un botón de animación de su efecto, pero es bastante avanzado. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión de servidor lp. Y también, se puede ver que ya creo un documento TML llamado index dot steml Con eso, creo un archivo CSS, estilo punto CSS, y como puedes ver, vinculo este archivo de estilo con este documento ETML Entonces primero, voy a crear una etiqueta nCAT dentro de la etiqueta body, S tipo A. Por defecto, no quiero redirigirla, así que quiero usar etiqueta has Ahora dentro de esta etiqueta de anclaje, voy a crear tres nuevas etiquetas span, clase span, front. Entonces voy a duplicar esta etiqueta span a tiempo. Nuestro primer nombre de clase span es front y nuestro segundo nombre de clase span es center, sum type, center. Nuestro último nombre de clase span es SDType B. Luego en nuestra parte frontal, voy a escribir click y en nuestra parte trasera, voy a escribir cabello Para nuestra etiqueta de span central, quiero dejarla en blanco. Si configuro este archivo, como puedes ver, como puedes ver en mi navegador, aquí se imprime, da clic aquí, esquina superior izquierda de este navegador. He hecho con éxito nuestra parte estable. Pasemos al archivo CSS y diseñemos esta página. Al principio, voy a darle estilo a nuestra etiqueta corporal, algún tipo body. Dentro de la clase, voy a poner cero marino, Barzin cero, y también quiero establecer padding zero padding zero. Entonces voy a usar familia de fuentes propity sotypeFont family propity sotypeFont family A Voy a establecer un color de fondo oscuro a nuestro cuerpo. Antecedentes. Y voy a usar hexa VH, 26, 26, 26 Si configuro este archivo, puedes ver el resultado. Como puedes ver en mi navegador, ahora nuestro color de fondo es gris oscuro, y ahora necesitamos darle estilo a esta etiqueta de anclaje. Dentro de la etiqueta de anclaje, tenemos un total de tres etiquetas de pan. Así que vamos a darle estilo a la etiqueta ancla. Así pizarra, A, dentro del receso Cali. Al principio, voy a usar posición de propiedad de posición. Posición absoluta. Ahora quiero alinear esta etiqueta de ancla a mitad de esta página. Para eso, voy a usar propiedad top, top 50%. Entonces voy a usar la propiedad P. P 50%. Si configuro este archivo, puedes ver el resultado. Como puedes ver, alinea nuestra etiqueta de anclaje en medio de esta página web. A continuación, voy a usar transform property. Entonces escribe, transforma aquí, transforma. Transformar traducir. Como ya sabéis, usando el método translate, podemos mover un elemento desde su posición actual según XXs e YX Para XXs voy a pasar -50% para YxS también voy a Entonces voy a decir hierba realzada a esta etiqueta de encer. Al principio, voy a atar la hierba. Con 200 píxeles. Y entonces voy a decir que altura propiedad, altura, altura, 60 pixel. Si configuro este archivo, puedes ver el resultado. Y luego voy a decir texto alinear centro. Centro de alineación de texto. Como saben, vamos a crear un botón uber de tres D. Para eso, necesitamos usar otra propiedad, que es transformar estilo, tipo Sumo, transformar estilo. Transformar el estilo aquí voy a usar preservar tres valores D. Estas propiedades especifican cómo se renderizan los elementos anidados en tres espacios D. Como usted sabe, necesitamos usar esta propiedad con transformar propiedad. Sin transformar la propiedad, no podemos usar esta propiedad. Lo aprendimos en nuestra serie de tutoriales. Entonces voy a usar otra propiedad que es prospectiva Prospectiva 1,000 píxeles. También voy a decir transformar o en posición, transformar o Z centro centro. Si configuro este archivo, como pueden ver, ahora alinea perfectamente nuestro contenido a mitad de esta página web. No podemos entender esta transformación prospectiva y tres D porque no diseñamos nuestro objeto span. Ahora necesitamos darle estilo a nuestro objeto de repuesto. Como puede ver, tenemos un total de tres objetos span. Vamos a darle estilo a todo el objeto a la vez. Para eso, voy a seleccionar etiqueta span. Span. Es que el Kali es, al principio, voy a teclear posición propiedad Posición absoluta. A continuación, necesitamos alinear esta etiqueta span, así que top zero, it zero. Y también, voy a decir altura y peso, estatura, 100%. Peso, 100%. Y entonces voy a usar hizo Display block. Y también, voy a alinear el texto dentro de la etiqueta span. Entonces voy a escribir texto alinear texto alinear centro. Y luego voy a establecer la altura de línea, altura de línea, 60 píxeles. Si configuro este archivo, aquí se puede ver que se superpone a nuestro texto. A continuación, voy a establecer el tamaño de fuente tamaño de fuente, 24 píxeles. Y también, voy a establecer un color de fondo a la etiqueta span. Antecedentes. Voy a usar RGVavalu Como saben, primero, tenemos que pasar el valor rojo, luego tenemos que pasar el valor verde al final Valor azul. Con eso, tenemos que pasar Alpha Val. Podemos controlar la transparencia usando Alpha Val. Por eso necesitamos usar este olmo. Entonces aquí, voy a pasar 255 por rojo, 255. Y luego voy a pasar una vez más, 255 para el verde y también 255 para el azul. Y para nuestro Alpha Valu, voy a pasar 0.10 Y ahora necesitamos cambiar el estilo de transformación. Así que voy a atar transformar estilo transformar estilo, conservar tres D. Ahora no quiero mostrar la parte trasera de nuestra etiqueta span Cuando gira, no queremos mostrar la parte trasera. Para eso, necesitamos usar Apoparty y ya lo sabes, que es la visibilidad de retroceso Retroceder visibilidad, y voy a establecer un valor oculto porque no quiero mostrar la parte trasera Entonces voy a establecer el radio de borde de la etiqueta span, radio de borde, 30 pixel o las siguientes propiedades toma transform. A continuación, quiero transformar el texto en mayúsculas. Para eso, voy a usar la propiedad de transformación de Tex, toma transform, mayúsculas A continuación, voy a establecer un color a nuestro texto. Color Blanco. Si configuro este archivo, puedes ver el resultado. Con eso, quiero decir que la propiedad de transición. Transición. 1 segundo. Como saben, tenemos un total de tres objetos span dentro de la etiqueta cat. Voy a transformar toda la etiqueta span de manera diferente. Al principio, voy a transformar el frontal y luego voy a transformar el trasero. Por fin, voy a transformar el centro uno, y vamos a ejecutar la transformación usando Su seleccionada. Volvamos al archivo CSS y comencemos con nuestra primera etiqueta span. Voy a escribir span dot front. Entonces dentro de los alias, voy a usar transform property, Transform, transform, rotate, X, y quiero rotarlo cero DT Con eso, quiero moverlo en dirección de Zdx. Entonces voy a escribir traducir ZT pixel. Si configuro este archivo, no se puede ver el resultado porque quiero hacer esta transformación cuando hober mi cursor sobre este botón Ahora quiero rotar este botón cuando me acuesto sobre él. Para ello, necesitamos crear un selector Her. Entonces voy a duplicar esta línea y voy a atar etiqueta cortada, colon hover Entonces, cuando hober mi cursor, quiero rotar nuestra etiqueta frontal span menos 18d Si configuro este archivo y hober mi cursor sobre él, se puede ver el resultado Puedes ver nuestra primera etiqueta span rotar menos 180 grados. Lo mismo que tenemos que hacer para nuestra etiqueta de espalda. Entonces voy a seleccionar este código y obtenemos esta línea. Entonces aquí voy a escribir span dot B. Por defecto, quiero girarlo 180 grados, y voy a usar el mismo valor transit pixel. En nuestro selector de Hober, quiero girarlo cero DD, atrás, y quiero girarlo cero Si configuro este archivo y Hobermcas están en él, ahora puedes ver el efecto de tres D giratorios Ahora quiero establecer un color de fondo para nuestra etiqueta de span central. Éste. Para eso, voy a escribir span dot center. Dentro de las aliras voy a usar propiedad de fondo. Fondo, y voy a usar color degradado, y voy a usar gradiente lineal. Y voy a usar dirección de labios. Entonces quiero pasarle a ello. Oma y ahora voy a usar hexa Color Val tiene etiqueta, C 30 1a5b Es de color rosa y nuestro siguiente color es tiene etiqueta 7129 BD. Es de color morado. Si me siento este archivo, se puede ver el resultado. Ahora, para nuestro objeto span central, quiero activar la visibilidad de retroceso. Voy a escribir Backpace visibility y voy a usar Visual Value Entonces voy a crear el selector Over para nuestra etiqueta span central. Voy a quitar la palabra clave front, y voy a teclear center. Para las rotaciones, voy a usar menos 180. Pero para traducir st, voy a usar cero pixel. Si configuro este archivo y Huber Mikaza en este botón, se puede ver el efecto tres D. Así que creamos con éxito tres botones D flip Huber. Espero que les guste este proyecto. Gracias por ver este VD. Estén atentos para nuestro próximo ejercicio.