KodeInfo | Learning resources for web and mobile development

CSS Inbox Button Hover

November 23rd, 2014 08:32:30 by Irfan Iqbal Comments(0) - Views(5625)

 

In this post let us create a CSS Inbox Button Hover which is originally posted by jonathan Larradet .

Output:

Source Code:

CSS:

    .circle
    {
    width:60px;
    height:60px;
    box-shadow: 3px 3px 6px #333333;
    border-radius:50%;
    position: absolute;
    right: 50%;
    margin-right:-30px;
    bottom: 10px;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -ms-transition:all 0.2s linear;
    transition:all 0.2s linear;
    }
    .first_circle
    {
    background-color:#db4531;
    z-index: 3;
    }
    .second_circle
    {
    z-index: 2;
    background-image: url(YOUR-URL-IMAGE.png);
    background-size:cover;
    }
    .third_circle
    {
    z-index: 1;
    background-image: url(YOUR-URL-IMAGE.png);
    background-size:cover;
    }
    .contener_circle:hover .second_circle
    {
    bottom:75px;
    }
    .contener_circle:hover .third_circle
    {
    bottom:140px;
    }

HTML:

    <div align="center" style="height:200px;position:relative;">
    <div class="contener_circle">
    <div class="circle first_circle">
    <img src="YOUR-URL-IMAGE.png">
    </div>
    <div class="circle second_circle">&nbsp;</div>
    <div class="circle third_circle">&nbsp;</div>
    </div>
    </div>

originally posted by

http://www.wifeo.com/code/49-pure-css-inbox-button-hover.html

Thanks

kodeinfo .

Author

  • Irfan Iqbal
    Irfan Iqbal

    Irfan is a web developer and consultant from India. He is the co-founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, manages everything related to marketing and seo for kodeinfo , works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

Related

WHY USE A FRAMEWORK OVER PLAIN PHP

WHY USE A FRAMEWORK OVER PLAIN PHP
read more

GETTING STARTED WITH LARAVEL

GETTING STARTED WITH LARAVEL
read more

UNDERSTANDING LARAVEL STRUCTURE

UNDERSTANDING LARAVEL STRUCTURE
read more

UNDERSTANDING LARAVEL ROUTES

UNDERSTANDING LARAVEL ROUTES
read more

comments powered by Disqus