Наведите курсор мыши на кнопку, слева от кнопки появится другой тег div или HTML.

Question

Привет, у меня есть проблема, пытаясь получить анимацию на левой стороне кнопки, когда пользователь нажимает на кнопку. Один из примеров, которые объясняют как ниже:

HTML:

<div class="block">
<div class="normal">
    <span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
    on Twitter
</a>

CSS:

   /**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}

.block { 
    width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
    position: relative; 
    perspective: 350;
}
.block .normal {
    background: gray; padding: 15px; cursor: pointer;
    position:relative; z-index:2;
}
.block .hover {
    background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
    position: relative; z-index:1;
    transition: all 250ms ease;
}
.block:hover .normal {
    background: #0084b4;
}
.block:hover .hover {
    margin-right: 0; 
    transform-origin: top;
    /*
    animation-name: balance;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 110ms;
    animation-iteration-count: 1;
    animation-direction: alternate;
    */
    animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

@keyframes balance { 
    0% { margin-top: 0; } 
    15% { margin-top: 0; transform: rotateX(-50deg); }  
    30% { margin-top: 0; transform: rotateX(50deg); } 
    45% { margin-top: 0; transform: rotateX(-30deg); } 
    60% { margin-top: 0; transform: rotateX(30deg); } 
    75% { margin-top: 0; transform: rotateX(-30deg); } 
    100% { margin-top: 0; transform: rotateX(0deg);} 
}

https://jsfiddle.net/9dwk8vzg/

Оригинальная ссылка: http://dabblet.com/gist/5559193

Но для этого примера, расположенного внизу слева от кнопки, я попытался с помощью margin-right и padding-left все еще не в состоянии заставить тег div для наведения апелляции мыши находиться справа, может быть я знаю что мне не хватает, чтобы получить тег div для апелляции справа /

Answer 1

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}

.block { 
 width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
 position: relative; 
 perspective: 350;
}
.block .normal {
 width: 100%;
 background: gray; padding: 15px; cursor: pointer;
 position:relative; z-index:2;
}
.block .hover {
 width: 100%;
 background: #00aced;
 padding: 15px; 
 display: block;
 position:absolute;
 color: #fff;
 text-decoration: none;
 z-index:1;
 transition: all 250ms ease;
 right: -30px;
 top: 0;
}
.block:hover .normal {
 background: #0084b4;
}
.block:hover .hover {
 right: 100%;
 transform-origin: top;
 /*
 animation-name: balance;
 animation-duration: 1.5s;
 animation-timing-function: ease-in-out;
 animation-delay: 110ms;
 animation-iteration-count: 1;
 animation-direction: alternate;
 */
 animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

@keyframes balance { 
 15% { width: 95%; } 
 30% { width: 105%; } 
 45% { width: 97%; } 
 60% { width: 103%; } 
 75% { width: 97%; } 
 100% { width: 100%; } 
}

<div class="block">
 <div class="normal">
  <span>Follow me...</span>
 </div>
 <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
  on Twitter
 </a>
</div>