Hidden button

by 3axap

HTML

<div class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam erat eget dolor dapibus tempus. Mauris sem lorem, faucibus eget gravida ac, mattis non est. Mauris scelerisque ullamcorper iaculis. Curabitur blandit sem sit amet ligula facilisis ultrices. Maecenas sit amet ante in justo auctor cursus. Donec id magna quis arcu facilisis euismod vitae nec sapien. Integer semper suscipit tellus eget elementum. Quisque rutrum accumsan est lobortis rhoncus.<div class="reply">Йа кнопка</div></div>

CSS

.reply {display:none;}

.comment:hover .reply
{
    position: absolute;
    right: 60px;
    margin-top: -20px;
    display: block;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.comment {
    border: 1px solid #dcdcdc;
    margin:50px;
}