hoy voy a compartir contigo botón CSS animado con animación que revela el desplazamiento. Este es un botón CSS3 animado que tiene animación.
La animación es que cuando pasa el mouse sobre este botón, los dos elementos se revelan, uno está en la parte superior del botón y el otro está en la parte inferior de este botón.
Este es un botón muy hermoso y es compatible con todos los navegadores. Este botón funcionará igual en todos los navegadores porque hemos utilizado prefijos de navegador en las propiedades CSS de este botón.
Demostración/Vista previa del botón Css3 animado con animación reveladora:
Esta es la vista previa del botón Css3 animado con animación reveladora.
Como sabe, el marcado HTML es obligatorio para eso, por lo que primero deberíamos tener un marcado HTML. A continuación se muestra el marcado HTML.
El código HTML, CSS y Javascript que se proporciona a continuación puede tener algunos errores de codificación, por lo que le recomiendo que use códigos de archivos de proyecto en caso de que haya algún error con el funcionamiento del código.
marcado HTML para Botón Css3 animado con animación reveladora :
<div class="muzammil"><a href="#">Download</a><p class="top">click to begin</p><p class="bottom">1.2MB .zip</p></div>| Atributo | Pertenece a | Descripción |
|---|---|---|
| juego de caracteres | , | Especifica la codificación de caracteres |
| clase | Atributos globales | Especifica uno o más nombres de clase para un elemento (se refiere a una clase en una hoja de estilo) |
| contenido | Da el valor asociado con el http-equiv o atributo de nombre | |
| href | , , , | Especifica la URL de la página a la que va el enlace. |
| nombre | , , , , , , , , , , , | Especifica el nombre del elemento. |
| real | , , | Especifica la relación entre el documento actual y el documento vinculado |
| ancho | , , , | Especifica el ancho del elemento. |
Este fue simplemente nuestro mercado HTML de aproximadamente 3 a 4 líneas, puede cambiar el texto de acuerdo con sus requisitos y hacer que este botón entre en acción.
Puedes usar este código HTML donde quieras para insertar este botón en las publicaciones de Blogger o en las publicaciones de WordPress, funcionará perfectamente en ambos.
Sin CSS este script (Botón Css3 animado con animación reveladora) nunca se verá ideal. Así que aquí estamos, y nuestro marcado HTML está listo ahora tenemos que personalizar nuestro HTML y solo se puede hacer usando CSS.
Entonces, este es el código CSS que he escrito y lo usaremos para personalizar el botón Css3 animado con animación Reaveling. Puede copiarlo haciendo clic en el código y el código se copiará automáticamente en el portapapeles.
Código CSS para Botón Css3 animado con animación reveladora :
.muzammil{width:200px;margin:150px auto}.muzammil a{display:block;height:50px;width:200px;color:white;font:17px/50px Helvetica, Verdana, sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#00b7ea;background:-moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:linear-gradient(top, #00b7ea 0%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00b7ea", endColorstr="#009ec3",GradientType=0 )}.muzammil a, p{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,0.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,0.2);box-shadow:2px 2px 8px rgba(0,0,0,0.2)}p{background:#222;display:block;height:40px;width:180px;margin:-50px 0 0 10px;text-align:center;font:12px/45px Helvetica, Verdana, sans-serif;color:#fff;position:absolute;z-index:-1;-webkit-transition:margin 0.5s ease;-moz-transition:margin 0.5s ease;-o-transition:margin 0.5s ease;-ms-transition:margin 0.5s ease;transition:margin 0.5s ease}.muzammil:hover .bottom{margin:-10px 0 0 10px}.muzammil:hover .top{margin:-80px 0 0 10px;line-height:35px}.muzammil a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00b7ea", endColorstr="#009ec3",GradientType=0 )}.muzammil:active .bottom{margin:-20px 0 0 10px}.muzammil:active .top{margin:-70px 0 0 10px}En el código CSS puedes ver que he usado prefijos del navegador (por ejemplo: -moz-, -o-, -webkit-, -ms-,) como te dije al principio de este artículo para que este botón funcione correctamente. en todo tipo de navegadores, ya sea que admitan estas propiedades CSS o no. Las descripciones de estos prefijos se dan a continuación.
Estos son algunos selectores de CSS que se utilizan en el código CSS anterior con sus descripciones y ejemplos.
| Selector | Ejemplo | Descripción |
|---|---|---|
| :activo | a:activo | Selecciona el enlace activo |
| :flotar | a: flotar | Selecciona enlaces al pasar el ratón por encima |
| -webkit- | -webkit-color:rojo; | Este prefijo se usa para especificar el estilo de cualquier elemento. En los navegadores Chrome y Safari, el color del texto será rojo. |
| -o- | -o-color: azul; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Opera, el color del texto será azul. |
| -moz- | -moz-color:verde; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Mozilla o Firefox, el color del texto será verde. |
| -EM- | -ms-color:amarillo; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Internet Explorer, el color del texto será amarillo. |
Finalizando:
Así que aquí estamos, hemos hecho y nuestro proyecto Botón Css3 animado con animación reveladora está listo, ahora puede copiar y combinar todos los códigos proporcionados anteriormente y combinarlos en un solo archivo html y divertirse.
Si los archivos del proyecto no se descargan o si encuentra algún error durante la descarga, simplemente puede dejar su comentario e intentaré resolver el problema lo antes posible.
Descargar proyecto (Botón Css3 animado con animación reveladora) Archivo :
Descargar
Si tiene alguna dificultad para descargar el archivo del proyecto, deje su comentario a continuación. Resolveré ese problema lo antes posible.
Eso es todo, hemos terminado ahora, si desea descargar el botón de descarga del archivo del proyecto que se proporciona arriba, puede descargarlo desde allí, nuestra publicación y cabello de hoy, y si desea publicar en este sitio, es bienvenido.
Aquí puede simplemente escribir su publicación y envolverla en un archivo de texto y simplemente enviar ese archivo de texto de la publicación a mi ID de correo electrónico. Lo revisaré e intentaré publicar esa publicación en mi sitio web.
hoy voy a compartir contigo botón CSS animado con animación que revela el desplazamiento. Este es un botón CSS3 animado que tiene animación.
La animación es que cuando pasa el mouse sobre este botón, los dos elementos se revelan, uno está en la parte superior del botón y el otro está en la parte inferior de este botón.
Este es un botón muy hermoso y es compatible con todos los navegadores. Este botón funcionará igual en todos los navegadores porque hemos utilizado prefijos de navegador en las propiedades CSS de este botón.
Demostración/Vista previa del botón Css3 animado con animación reveladora:
Esta es la vista previa del botón Css3 animado con animación reveladora.
Como sabe, el marcado HTML es obligatorio para eso, por lo que primero deberíamos tener un marcado HTML. A continuación se muestra el marcado HTML.
El código HTML, CSS y Javascript que se proporciona a continuación puede tener algunos errores de codificación, por lo que le recomiendo que use códigos de archivos de proyecto en caso de que haya algún error con el funcionamiento del código.
marcado HTML para Botón Css3 animado con animación reveladora :
<div class="muzammil"><a href="#">Download</a><p class="top">click to begin</p><p class="bottom">1.2MB .zip</p></div>| Atributo | Pertenece a | Descripción |
|---|---|---|
| juego de caracteres | , | Especifica la codificación de caracteres |
| clase | Atributos globales | Especifica uno o más nombres de clase para un elemento (se refiere a una clase en una hoja de estilo) |
| contenido | Da el valor asociado con el http-equiv o atributo de nombre | |
| href | , , , | Especifica la URL de la página a la que va el enlace. |
| nombre | , , , , , , , , , , , | Especifica el nombre del elemento. |
| real | , , | Especifica la relación entre el documento actual y el documento vinculado |
| ancho | , , , | Especifica el ancho del elemento. |
Este fue simplemente nuestro mercado HTML de aproximadamente 3 a 4 líneas, puede cambiar el texto de acuerdo con sus requisitos y hacer que este botón entre en acción.
Puedes usar este código HTML donde quieras para insertar este botón en las publicaciones de Blogger o en las publicaciones de WordPress, funcionará perfectamente en ambos.
Sin CSS este script (Botón Css3 animado con animación reveladora) nunca se verá ideal. Así que aquí estamos, y nuestro marcado HTML está listo ahora tenemos que personalizar nuestro HTML y solo se puede hacer usando CSS.
Entonces, este es el código CSS que he escrito y lo usaremos para personalizar el botón Css3 animado con animación Reaveling. Puede copiarlo haciendo clic en el código y el código se copiará automáticamente en el portapapeles.
Código CSS para Botón Css3 animado con animación reveladora :
.muzammil{width:200px;margin:150px auto}.muzammil a{display:block;height:50px;width:200px;color:white;font:17px/50px Helvetica, Verdana, sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#00b7ea;background:-moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:linear-gradient(top, #00b7ea 0%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00b7ea", endColorstr="#009ec3",GradientType=0 )}.muzammil a, p{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,0.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,0.2);box-shadow:2px 2px 8px rgba(0,0,0,0.2)}p{background:#222;display:block;height:40px;width:180px;margin:-50px 0 0 10px;text-align:center;font:12px/45px Helvetica, Verdana, sans-serif;color:#fff;position:absolute;z-index:-1;-webkit-transition:margin 0.5s ease;-moz-transition:margin 0.5s ease;-o-transition:margin 0.5s ease;-ms-transition:margin 0.5s ease;transition:margin 0.5s ease}.muzammil:hover .bottom{margin:-10px 0 0 10px}.muzammil:hover .top{margin:-80px 0 0 10px;line-height:35px}.muzammil a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00b7ea", endColorstr="#009ec3",GradientType=0 )}.muzammil:active .bottom{margin:-20px 0 0 10px}.muzammil:active .top{margin:-70px 0 0 10px}En el código CSS puedes ver que he usado prefijos del navegador (por ejemplo: -moz-, -o-, -webkit-, -ms-,) como te dije al principio de este artículo para que este botón funcione correctamente. en todo tipo de navegadores, ya sea que admitan estas propiedades CSS o no. Las descripciones de estos prefijos se dan a continuación.
Estos son algunos selectores de CSS que se utilizan en el código CSS anterior con sus descripciones y ejemplos.
| Selector | Ejemplo | Descripción |
|---|---|---|
| :activo | a:activo | Selecciona el enlace activo |
| :flotar | a: flotar | Selecciona enlaces al pasar el ratón por encima |
| -webkit- | -webkit-color:rojo; | Este prefijo se usa para especificar el estilo de cualquier elemento. En los navegadores Chrome y Safari, el color del texto será rojo. |
| -o- | -o-color: azul; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Opera, el color del texto será azul. |
| -moz- | -moz-color:verde; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Mozilla o Firefox, el color del texto será verde. |
| -EM- | -ms-color:amarillo; | Este prefijo se usa para especificar el estilo de cualquier elemento. En el navegador Internet Explorer, el color del texto será amarillo. |
Finalizando:
Así que aquí estamos, hemos hecho y nuestro proyecto Botón Css3 animado con animación reveladora está listo, ahora puede copiar y combinar todos los códigos proporcionados anteriormente y combinarlos en un solo archivo html y divertirse.
Si los archivos del proyecto no se descargan o si encuentra algún error durante la descarga, simplemente puede dejar su comentario e intentaré resolver el problema lo antes posible.
Descargar proyecto (Botón Css3 animado con animación reveladora) Archivo :
Descargar
Si tiene alguna dificultad para descargar el archivo del proyecto, deje su comentario a continuación. Resolveré ese problema lo antes posible.
Eso es todo, hemos terminado ahora, si desea descargar el botón de descarga del archivo del proyecto que se proporciona arriba, puede descargarlo desde allí, nuestra publicación y cabello de hoy, y si desea publicar en este sitio, es bienvenido.
Aquí puede simplemente escribir su publicación y envolverla en un archivo de texto y simplemente enviar ese archivo de texto de la publicación a mi ID de correo electrónico. Lo revisaré e intentaré publicar esa publicación en mi sitio web.