Practice CSS

by Shoaib Chikate

HTML

<div id="sticky-sidebar">
                <div class="label">Start your trial here</div>
                <a class="badge" href="#devsignup"><img style="margin-top:9px;margin-left:41px" src="https://mybinja.com/dev/wp-content/uploads/2014/04/[email protected]_.png"></a>
</div>

CSS

#sticky-sidebar{
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
    background-color:black;
    width:100px;
    height:100px;
    position:fixed;
    top:220px;
    right:-50px;
z-index:999;
    -webkit-border-radius: 0 20px 0 20px;
    -moz-border-radius: 0 20px 0 20px;
    border-radius: 0 20px 0 20px;
}

#sticky-sidebar .label {
    color: #5eab1f;
    opacity: 0;
    position: relative;
    right: 100px;
    top: 78px;
}

#sticky-sidebar:hover .label {
opacity:1;
}

#sticky-sidebar a {
    display: block;
    height: 134px;
    width: 63px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -o-transform: rotate(-45deg); /* Opera */
    -moz-transform: rotate(-45deg); /* Firefox */
}