Jelly Buttons

In this example below you will see how to do a Jelly Buttons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gf8bit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gf8bit ©
  • HTML
  • CSS
  • JavaScript
        <!DOCTYPE html>
<head>
<title>Jelly Buttons</title>
</head>
<body>
	<div id="line">
		<br>
		Jelly Buttons by <a href="http://gf8bit.org">gf8bit</a>
	
	<div id="box">
<a href="#" class="button green"></a>
<a href="#" class="button pink"></a>
<div id="box2"></div>
</div>
</div>
</body>
</html>
    

/*Downloaded from https://www.codeseek.co/gf8bit/jelly-buttons-pzuCx */
        html{
		margin: 0%;
	padding: 0%;
	background:#fff;
    text-shadow:0px 1px 0px #fff;
    color:gray;
    text-align: center;
font-family: 'lucida sans unicode'
}
a{
	text-shadow:0px 1px 0px #fff;
    color:gray;
	text-decoration:none;
}
body{
		margin: 0%;
	padding: 0%;
    background:#fff;
}
.button{
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
            
            height:50px;
            width:70px;
            display:block;
            position: absolute;
            float: left;
            text-align: center;
            transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out; 
       -moz-transition: all 0.15s ease-in-out;
         -o-transition: all 0.15s ease-in-out; 
margin-left: 15px;
}
.button:active{
	            height:44px;
            width:80px;
            margin-top:6px;
            margin-left:10px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
}
.button:last-child{
    
}

.pink{
 -webkit-box-shadow:inset 0px -20px 50px 10px #E5A8FF, 0px -1px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0px -20px 50px 10px #E5A8FF, 0px -1px 5px 0px rgba(0,0,0,0.1);
         box-shadow:inset 0px -20px 50px 10px #E5A8FF, 0px -1px 5px 0px rgba(0,0,0,0.1);
	background: #fff;
    margin-left: 115px;
}
.pink:active{
    margin-left: 110px;
}
.green{
 -webkit-box-shadow:inset 0px -20px 50px 10px #63FF77, 0px -1px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0px -20px 50px 10px #63FF77, 0px -1px 5px 0px rgba(0,0,0,0.1);
         box-shadow:inset 0px -20px 50px 10px #63FF77, 0px -1px 5px 0px rgba(0,0,0,0.1);
	background: #fff;
}
#box{
    width:200px;
    height:50px;
    display: block;
    position: ;
    margin:100px auto;
    top: 400px;
overflow: hidden;
  
}
#box2{
        margin: 0%;
    padding: 0%;
    width:200px;
    height:20px;
    position: absolute;
    margin-top: 30px;
    display: block;
    background: #fff;
    z-index: 10;
border-top: 1px solid rgba(0,0,0,0.3);
overflow: hidden;
}
#line{
	margin: 0%;
	padding: 0%;
	width:100%;
	height:100%;
	top:0%;
	position: absolute;
	display: block;
background: #fff;
z-index: 10;

 -webkit-box-shadow:0px -1px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow:0px -1px 5px 0px rgba(0,0,0,0.1);
         box-shadow:0px -1px 5px 0px rgba(0,0,0,0.1);
}
    

/*Downloaded from https://www.codeseek.co/gf8bit/jelly-buttons-pzuCx */
        
    

Comments