Botones animados CSS3

Para ver en youtube click aquí
Para ver la lista de reproducción de CSS3, click aquí 
Dame like en facebook, click aquí

Código fuente del video

Parte CSS :

a {
  display : inline-block;
  background-color: black;
  padding: 15px;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius : 5px;
  text-decoration: none;
 }
 .anim2 {
  top: 100px;
 }
 .trans {
  top : 300px;
  transition: background-color 1s;
 }
 .anim3 {
  top: 200px;
 }
 
 @keyframes anim1 {
  0%{
   top: 20px;
  left: 20px;
  }
  25%{
   top: 10px;
  left: 20px;
  }
  50%{
   top: 30px;
  left: 10px;
  }
  100%{
   top: 20px;
  left: 30px;
  }
 }
 
 @keyframes anim2 {
  0%{
   background-color: black;
  }
  25%{
   background-color: red;
  }
  50%{
   background-color: blue;
  }
  100%{
   background-color: black;
  }
 }
 
 @keyframes anim3 {
  0%{
   padding : 15px;
  }
  50%{
   padding : 8px;
  }
  100%{
   padding : 15px;
  }
 }
 .anim1:hover {
  animation : anim1 1s infinite;
 }
 .anim2:hover {
  animation-name: anim2;
  animation-duration: 1s;
  animation-iteration-count : infinite;
 }
 
 .anim3:hover {
  animation : anim3 1s infinite;
 }
 .trans:hover {
  background-color: red;
 }

Parte HTML :

<a href="#" class="anim1" onclick="alert('hola');">Boton1</a>
<a href="#" class="anim2" onclick="alert('hola');">Boton2</a>
<a href="#" class="anim3" onclick="alert('hola');">Boton3</a>
<a href="#" class="trans" onclick="alert('hola');">Transisión</a>
  

Tooltips en CSS

Para ver en Youtube haz click aquí (Recuerda Suscribirte)
Para ver en Youtube (segundo video) haz click aquí 
Para ver más videos de CSS click aquí
Dame like en facebook, click aquí

¿Que es un "Tooltip" ?

 Los tooltip son usados para mostrar información extra acerca de un elemento, justo cuando el usuario pasa el mouse por encima. Los podemos ver como una forma mas moderna del antiguo atributo "alt", para los que no lo saben, anteriormente este atributo nos permitía mostrar un texto cuando el usuario posaba el mouse encima, actualmente este atributo tiene otra funcionalidad totalmente diferente.

Tooltip de texto

  En el primer video (El segundo estará disponible mas tarde o mañana) les muestro como hacer un tooltip animado de texto, a continuación el código fuente :

La parte CSS :

<style type="text/css">

.tooltip {

background-color: black;

color: white;

padding : 5px;

position: absolute;

border-radius: 5px;

top: 15px;

visibility: hidden;

transition: opacity 1s, visibility 1s, top 1s;

opacity: 0;

}

.tooltip::after {

content: " ";

position: absolute;

top: 100%;

left: 50%;

border-style: solid;

border-width: 5px;

border-color: black transparent transparent transparent;

}

.txt:hover + .tooltip {

visibility: visible;

opacity: 1;

top: 10px;

}

</style>

El HTML:

<br>

<br>

<span class="txt">mi texto</span>

<div class="tooltip">

Información

</div>

  Las etiquetas <br> las coloco para que "mi texto" no quede muy arriba y poder colocar el tooltip arriba de este

Tooltip con imagenes

  En el segundo video, les enseño también a crear un toolttip, pero ahora este no esta compuesto de texto sino de imágenes.

EL CSS :

<style type="text/css">

.tooltip img{

width: 350px;

box-shadow: 5px 5px 10px black;

}

.nav {

list-style-type: none;

margin: 0;

padding: 0;

}

.tooltip {

position : absolute;

visibility: hidden;

opacity: 0;

transition : opacity 1s, visibility 1s;

}

.hori {

display: inline-block;

}

.hori a{

display: block;

padding: 8px;

color: white;

background-color: gray;

text-decoration: none;

}

.hori:hover a{

background-color: black;

}

.hori:hover .tooltip{

visibility: visible;

opacity: 1;

}

</style>

El html :

<ul class="nav">

<li class="hori">

<a href="#">Cuzco</a>

<div class="tooltip">

<img src="Cuzco.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Louvre</a>

<div class="tooltip">

<img src="Louvre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">El puente de la torre</a>

<div class="tooltip">

<img src="Puentetorre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Venecia</a>

<div class="tooltip">

<img src="Venecia.jpg" />

</div>

</li>

</ul>

  

  Si te gustó este tutorial recuerda suscribirte a mi canal de Youtube y darme like en Facebook