Botón animado CSS3

Botón animado con texto y tooltip

by Juan Muñoz

HTML

<div id="contenedor">
    <div class="icon_p">
        <div class="text">
            <p>TALA <br/> ILEGAL</p>
        </div>
        <div class="popup">
            <p>Es una actividad económica que consiste en la explotación de minerales metálicos y no metálicos sin control ni regulación social y ambiental de parte del Estado.</p>
        </div>
        <div class="mas_icon">+</div>
    </div>
</div>

CSS

#contenedor {
    padding:140px;
}

.icon_p {
    width:74px;
    height:74px;
    background:#7CB490;
    border-radius:50%;
    text-align:center;
    position:relative;
    z-index:3;
}

.icon_p:hover .text {
    opacity:1;
}

.icon_p .text {
    position:absolute;
    bottom:-74px;
    z-index:2;
    opacity:0;
    transition: all 500ms;
    width:74px;
    height:74px;
    text-align:center;
    font-weight:bold;
}

.icon_p .text p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.icon_p .mas_icon {
    width:22px;
    height:22px;
    background:#1C1B1B;
    position:absolute;
    top: 0px;
    right: 0px;
    border-radius:50%;
    font-size:22px;
    line-height:22px;
    color:#E94C37;
    font-weight:bold;
    border:2px solid #E94C37;
    z-index:4;
    transition: all 800ms;
}

.icon_p:hover .mas_icon {
    transform:rotate(45deg);
}

.icon_p:hover .popup {
    opacity:1;
}

.icon_p .popup {
    position: absolute;
    top: -100px;
    z-index: 2;
    opacity: 1;
    width: 260px;
    height: 65px;
    text-align: center;
    font-weight: bold;
    left: 50%;
    background: #ddd;
    padding: 10px;
    border-radius: 8px;
    margin-left: -140px;
    opacity:0;
    transition: all 800ms;
}

.icon_p .popup:after {
    content:"";
    display:block;
    width:18px;
    height:18px;
    background: #ddd;
    transform:rotate(45deg);
    position:absolute;
    left:50%;
    margin-left:-9px;
}

.icon_p .popup p {
    margin:0;
    font-size:13px;
}

JavaScript

/* Only HTML and CSS */