Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[PUBLICO] Tutorial Botones con perspectiva 3D
#1
[Imagen: 141126054732499212.png]
Hola amigos aki les dejo este nuevo Tutorial Botones con perspectiva 3D publicare varios codigos/scripts tendran 3 Etiquetas Diferentes...
1.- [PUBLICO] El código fue usado/editado desde otra Pagina para traérselos.
2.- [PROPIO] Esto quiere decir que es mi Código Propio osea que yo cree el código de 0% - 100% pero podran usarlo con Respectivos Créditos.
3.- [PUBLICO/PROPIO] Esto quiere decir que el Código es Tanto como Código Mio como de otros users mas para que luego no digan que eso lo cree yo.


[Imagen: Imagenes.png]
[Imagen: screen.png]

[Imagen: screen.png]

HTML:


Código:
<!-- El contenedor de nuestro botón-->

<div class="boton">

<!-- Esta será la cara frontal de nuestro botón -->
<div class="cubierta">
<span class="texto">Sígueme</span>
</div>


<!-- El contenido que se mostrará cuando pase el mouse encima del botón -->
<div class="contenido">
<a href="#">Click Aquí</a>
</div>
</div>

CSS:


Código:
.boton{
height: 40px;
border-radius: 3px;
display: block;
margin: 20px;
-webkit-transform-origin: center center -15px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out;
cursor: pointer;
}

.cubierta{
height: 40px;
background:-webkit-linear-gradient(#dedbdb 0%, #ffffff 100%);
text-align: center;
border-radius: 3px;
border: 1px solid #ccc;
line-height: 40px;
opacity: 1;
-webkit-transition: opacity .5s;
}

.boton:hover{
-webkit-transform: rotateX(90deg);
}

.contenido{
height: 40px;
background: red;
line-height: 40px;
border-radius: 3px;
border: 1px solid #ccc;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: center top;
}

.contenido a{
color: white;
text-transform: uppercase;
text-decoration: none;
}

JS:
NO AHI

DEMO:
http://codepen.io/AngelKrak/pen/QwNEMv

[Imagen: 10-2.jpg]
Firma editada por moderación: Los enlaces con ID de referido no estan permitidos.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Aporte] Botones en Bootstrap cmascreativo.ml 0 55 08-09-2018, 06:47 AM
Último mensaje: cmascreativo.ml
Información [Tutorial] Certificado SSL Gratis StartSSL 2016 Tutorial DarkMaster 26 6,731 28-04-2016, 03:39 AM
Último mensaje: Lob3zNo
Bombilla [Tutorial] SSL Gratis, Conseguir e Instalar Certificado DarkMaster 16 1,303 06-01-2016, 01:32 AM
Último mensaje: DarkMaster
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 422 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  Botones Social Pure Css v2 By Spastox Spastox 2 523 25-04-2015, 06:48 AM
Último mensaje: garcon
Bombilla [PUBLICO] Imágenes con descripción animada CSS3 AngelKrak 1 620 20-01-2015, 06:29 AM
Último mensaje: garcon
Bombilla [PUBLICO] Spoiler Chromium AngelKrak 0 304 17-01-2015, 05:33 AM
Último mensaje: AngelKrak
  Botones Social Pure Css By Spastox Spastox 11 1,207 12-06-2014, 01:32 PM
Último mensaje: patrickvp
  [Tutorial] Aumentar el Tamaño Máximo al Cargar Archivos con PHP y Apache papanoel 0 820 22-01-2014, 04:38 AM
Último mensaje: papanoel
  Botones Tuenti, Facebook, Twitter Netohg 0 544 17-09-2013, 01:37 PM
Último mensaje: Netohg



Usuarios navegando en este tema: 1 invitado(s)