Showing posts with label buttons. Show all posts
Animated Modal
Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal V2.0 By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
   
<body onload="animate()">
    <div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
    <div id="modal">
    <div id="close" onclick="closeModal()">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
        <div id="success"></div>
        <div id="modalText"><h2><b>Awesome!</b></h2>
        <p>Write Something here maybe?</p>
        </div>
    <div id="modalPartition">
        <Div id="partitionArrow"></Div>
        <div id="partitionButton">
            <button class="btn btn-success btn-block"><b>START something</b></button>
        </div>
    </div>
    </div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>

</body>
   
<style>
#button{
    position: absolute;
    top:40%;
    left:43%;
    height:10%;
    width:14%;
    background-color:orange;
    -webkit-transition:all 0.25s ease-in;
    -moz-transition:all 0.25s ease-in 0s;
    border-radius: 5px;
    color: white;
    border-bottom-width: 9px;
    border-bottom-style: ridge;
    border-bottom-color: orangered;
    cursor: pointer;
cursor: hand;
}

#button:hover{
    background-color: #ffba3d;
    border-bottom-color: #ff5819;
}
   
#modal{
    position: absolute;
    top:50%;
    left:50%;
    height:0px;
    width:0px;
    background-color: rgb(230,98,73);
    border-style:solid;
    border-color:rgb(230,98,73);
    border-radius: 7px;
    border-width:0px;
    opacity: 0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease 0s;
    box-shadow: -8px 8px rgba(0,0,0,0.2);

}
   
#close{
    position: absolute;
    top:-20px;
    right:-20px;
    height:40px;
    width:40px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(230,98,73);
    border-width: 2px;
    cursor: pointer;
cursor: hand;
    background-color: white;
    box-shadow: -4px 4px black;
    box-shadow: -4px 4px rgba(0,0,0,0.5);
}
   
#line1{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
#line2{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(-39deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
    #copyright{
        position: absolute;
        top:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:black;
    }
   

#close:hover #line1{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
    opacity: 0.7;
}
   
#close:hover #line2{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    opacity: 0.7;
}
   
#success{
    position: absolute;
    top:10%;
    left:40.5%;
    height:100px;
    width:100px;
    border-radius: 50%;
    background-image: url(http://jkjautomotive.com/img/tick.png);
    background-size: 60% 60%;
    background-position:  center;
    background-color: white;
    background-repeat: no-repeat;
}
   
#modalPartition{
    position: absolute;
    bottom:0px;
    left:0px;
    height:30%;
    width:100%;
    background-color: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
   
#modalText{
    position: absolute;
    top:38%;
    height:25%;
    width:100%;
    left:0%;
    text-align: center;
    color:white;
}
   
#partitionArrow{
    position: absolute;
    left:48%;
    width:20px;
    top:-10px;
    height:20px;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    background-color: rgb(230,98,73);
}
   
#partitionButton{
    position: absolute;
    top:30%;
    left:30%;
    width:40%;
    height:60%;

}

.btn-block{
    background-color: rgb(230,98,73);
    border-color: rgb(230,98,73);
}
   
.btn-block:hover{
    background-color: rgb(212,90,67);
    border-color: rgb(212,90,67);
}
   
   
</style>

<script>
function openModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="10%";
    modal.style.height="65%";
    modal.style.left="32.5%";
    modal.style.width="35%";
    modal.style.borderWidth="2px";
    modal.style.opacity="1";
}
   
function closeModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="50%";
    modal.style.height="0%";
    modal.style.left="50%";
    modal.style.width="0%";
    modal.style.borderWidth="0px";
    modal.style.opacity="0";
}
   
function animate(){
    var button = document.getElementById("button");
   
    if(button.style.top!="43%"){
        button.style.top="43%";
    }
    else{
        button.style.top="40%";
    }
   
    setTimeout("animate()",320);
}
</script>
   
</html>
   

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.


Related Articles:

  



Here's the code snippet:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Social V1.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />

 
 </head>
   
<body style="height:15000px">
   <div id="socialPanel">
       <a href="#"><div id="button1"></div></a>
       <a href="#"><div id="button2"></div></a>
       <a href="#"><div id="button3"></div></a>
       <a href="#"><div id="button4"></div></a>
       <a href="#"><div id="button5"></div></a>
    </div>
   
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
   
</body>
    <style>
    #socialPanel{
        position: fixed;
        top:30%;
        height:240px;
        width:40px;
        right:5px;
    }
       
    #copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
    #button1{
        position: absolute;
        top:0px;
        right:0px;
        height:40px;
        width:40px;
        background-color: #3b5998;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2Z8E6y0bLhwZCfI1zCG2VlybflzbBdokGAIUIHRQ1-yEziROavbOelQDyqBxWv0tLInCHG8lRqd9XdlakNWMT4FM_0ryhYJmxgspbTR3pj81iKlue0Nt-T13OqQ7Jy9WgojecSzZ4Qo/s1600/fb.png);
        background-size: 100% 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
    }
   
    #button1:hover{
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQ67D3l7NukCLXLchPqw94QzBsOUsb0y0k0FlyojH34fWx1cO7l4YoSNvflNCFxuXfXdU0dyFXmvczqS5KmDjOC0OdJDQrcww6bEhzHJyROqmvR6Vs_Vu_M34VIuEfLifsfUVeMjMEk4/s1600/fb1.png);
        background-color: white;
    }
       
    #button2{
        position: absolute;
        top:40px;
        right:0px;
        height:40px;
        width:40px;
        background-color: #4099FF;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFYiR-y5L6DqK4t6513sr9ywt90hI6vmzR27Q9lDpkXYbbRT-3C7F26TKCucehQXDoixiWRO9vBdECa_M2Eilyi2kEOwXIsl6nHGK_Bfk1cPODvXwlFZGj8Iv8jwWzgH58uStabb3sl8/s1600/twitter.png);
        background-size: 100% 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
    }
       
    #button2:hover{
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ-o8zzjDdLZIflLyOp8k2qoNmvE_QLPfsbbcqbBfYe0gcgJcp_Sb1WrbYOWN-d6tSq21q9pIsGL_2XuNYDhdSYWwt9akSVHhLGegUS3vaUgir9cRzd4qYqGzh8Qu5jXv9RmfkDzficc/s1600/twitter1.png);
        background-color: white;
    }
       
    #button3{
        position: absolute;
        top:80px;
        right:0px;
        height:40px;
        width:40px;
        background-color: #007bb6;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga-pveo-UrxsR38DWrkfKc6YoIaSYhje4pPaAefsm3TOMle8R-FZigLuZnbDOFC7fRoqyUmOPOcAy8L7bSHo3Pf4vDp2NdrM9owTB3fjseMvCatbtzTnWsVIWPLlOA86bXLpqHzvsvIP8/s1600/linkedin.png);
        background-size: 100% 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
    }
       
    #button3:hover{
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-oH2pA3uqKUvziHJfg_Bsak-PwAVgXk63xFf9-mdAfKfwL5IBJixm80AWtsRd2Msh9iEYFwJUtD3scPm_gTo0taorbG5L9ZLuzEaDhFCH81XlJGwswpwtgZUYmii7-j8tnObkdzHBCg/s1600/linkedin1.png);
        background-color: white;      
    }
       
    #button4{
        position: absolute;
        top:120px;
        right:0px;
        height:40px;
        width:40px;
        background-color: #C92228;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGJrdf7qTRUaeYF7352qEk-l_OUpxmrImL6yVGOqLJaulvKNW-R1iw-h4SZiliB43eCPpTC-3XBGgxUjz5HwxJNzZ6UysoIl2h6SPDtxe64BqP5-5yBLRHhH_Edn5wVLjBBT4lX38sIY/s1600/pintrest.png);
        background-size: 90% 90%;
        background-repeat: no-repeat;
        -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
    }
       
    #button4:hover{
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglhuFyNTLB3Ag1feIIXeqx79WM9MFmJCpDDGyhN2OwujjsXlly_SWM8vHbyVuqYgxK3mLpb_B038Y3uA4z9kTN6joXZvoMg4T1hnr-aJ6f8UvKAdbnfFcU4yVwkvXuIEDRdIPHRvh0bXc/s1600/pintrest1.png);
        background-color: white;      
    }

    #button5{
        position: absolute;
        top:160px;
        right:0px;
        height:40px;
        width:40px;
        background-color: #a77658;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBu8BVYt6LZ4wm8LWrhd84R8OHfoirJHTITqbqMhSsmJ219YzEUjZjNhI5wtu_DxD9DTftU-KUiWgE_CTbz5-fH9XD_35Qvd3W5NUsHgZmOVDPxaselvlFYL-UI4lgRnL3ApyqW-SRSc/s1600/insta.png);
        background-size: 100% 100%;
        -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
    }
       
    #button5:hover{
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOSzvBx9uMbZ00V189O_zBWp3OtOPliKz2CBwHtxMkG63qpZsX1tuRgNhw0BPwMflU4mvDaCZpgH_ehAkiJr1GZrRUQbxlsy9IKKXhisGZTiSjc1a8k2FNu-HX4B26N1vIIbjTFHLfn6g/s1600/insta1.png);
        background-color: white;      
    }
       
    </style>
   
</html>


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Subscribe to: Posts (Atom)