Hello, guys in this tutorial we will create a jelly button using HTML CSS & TweenMax.js.
The HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.
First, we need to create two files index.html and style.css then we need to do code for it.
Jelly button Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to create jelly button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>
</head>
<body>
<button class="button">
<span>Click me</span>
</button>
</body>
<script type="text/javascript">
var $button = document.querySelector('.button');
$button.addEventListener('click', function() {
var duration = 0.3,
delay = 0.05;
TweenMax.to($button, duration, {scaleY: 1.2, ease: Expo.easeOut});
TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
});
</script>
</html>
Jelly button Step:2
Then we need to add code for style.css which code I provide below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f1f2f3;
}
.button {
position: relative;
border: 0;
padding: 12px 40px;
border-radius: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
outline: 0;
background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);
box-shadow: 0 1rem 1.25rem 0 rgba(22,75,195,0.50), 0 -0.25rem 1.5rem
rgba(110, 15, 155, 1) inset, 0 0.75rem 0.5rem
rgba(255,255,255, 0.4) inset, 0 0.25rem 0.5rem 0
rgba(180, 70, 207, 1) inset;
}
Jelly Button video Output:
Jelly Button codepen Output:
For more interesting content
Top comments (0)