Favorite Button Animation using HTML, CSS, JavaScript with free source code

favorite button css,favorite button html css,button css examples,button styling css examples,button focus css example,css favorite button,awesome css buttons,css fancy button,favorite button,b-button icon,b-button color,best css button effects,easy css buttons,button hover css examples,hover button css code,how to highlight button in html,favorite button html,css like button,k-button color,k-button,my favorite button,css fancy buttons,no style button css,no favorites,no like button on facebook page 2021,no like button on facebook page,no button border css,no like button on facebook post,p-button style,p-button icon,p font family,q-btn icon,q-button quasar,q-btn-toggle,v-btn css,v-button color,v-btn styles,x button font awesome,x button css,x css icon,z-position css,z-order css,css 2 buttons side by side,css two buttons next to each other,3-button navigation bar,css 3 buttons in a row,3d css buttons,modern css button,7.css,javascript projects,html css javascript projects,html css javascript projects with source code,javascript projects for beginners,html css javascript projects for beginners,advanced javascript projects with source code,100 javascript projects,simple javascript projects with source code,vanilla javascript projects,cool javascript projects,fun javascript projects,javascript projects advanced,javascript projects api,javascript ai projects,javascript array projects,javascript api projects for beginners,javascript awesome projects,javascript amazing projects,javascript api project ideas,sololearn javascript project answers,sololearn javascript project answers trip planner,advanced javascript projects with source code github,advanced vanilla javascript projects,arduino javascript projects,asynchronous javascript projects,amazing javascript projects,awesome javascript projects,api javascript projects,advanced javascript projects ideas,html css and javascript projects,javascript projects beginners,javascript projects beginner to advanced,javascript projects book,javascript projects boilerplate,javascript project based learning,javascript project best practices,javascript backend projects,javascript basic projects for practice,javascript best projects,javascript blockchain projects,beginner javascript projects,best javascript projects,best javascript projects for beginners,best html css javascript projects,beginner html css javascript projects,best javascript projects for portfolio,best javascript projects for resume,backend javascript projects,build javascript projects,beginner level javascript projects,javascript projects codepen,javascript projects code,javascript projects course,javascript projects challenges,javascript projects create,javascript project calculator,javascript project code with harry,javascript project compile,javascript project clone,javascript project command,codepen javascript projects,code with harry javascript projects,cool javascript projects for beginners,complex javascript projects,creative javascript projects,codecademy javascript projects,css javascript projects,codehs javascript projects,crud javascript projects,javascript projects download,javascript projects database,javascript project documentation,javascript project directory structure,js projects danko mp3 download,js projects dust mp3 download,javascript project directory,javascript project date,javascript dom projects,javascript dom projects github,dom javascript projects,difficult javascript projects,dependency smells in javascript projects,javascript projects with source code free download,html css javascript projects free download,javascript dom manipulation projects,6 javascript projects pdf free download,30 javascript projects in 30 days,100 days of code javascript projects,web development javascript projects,javascript projects examples,javascript projects easy,javascript project examples with source code,javascript project example github,javascript project eclipse,javascript project euler,javascript projects explained,javascript project editor,javascript es6 projects,javascript example projects for beginners,easy javascript projects,easy beginner javascript projects,easiest javascript projects,example javascript projects,es6 javascript projects,eloquent javascript projects,easy javascript projects ideas,editor javascript projects,javascript 7th edition hands-on projects,javascript 6th edition hands-on projects,javascript projects for portfolio,javascript projects for resume,javascript projects for intermediate,javascript projects for beginners with source code,javascript projects for beginners reddit,javascript projects for advanced,javascript projects for portfolio reddit,javascript projects for students,javascript projects for beginners pdf,freecodecamp javascript projects,free javascript projects with source code,free javascript projects,full stack javascript projects,front end javascript projects,free html css javascript projects,front end html css javascript projects,freelance javascript projects,final year javascript projects,javascript projects github,javascript projects geeksforgeeks,javascript projects github for beginners,javascript projects games,javascript project generator,js projects groove cartel,js projects glasgow,javascript game projects with source code,javascript guided projects,javascript game projects for beginners,github javascript projects,github javascript projects for beginners,github html css javascript projects,good javascript projects,good beginner javascript projects,good javascript projects for resume,geeksforgeeks javascript projects,great javascript projects,gsoc javascript projects,github top javascript projects,javascript project host,javascript html projects,javascript hard projects,javascript projects in hindi,javascript projects for high school students,javascript css html projects,hardest javascript projects,javascript projects to get a job,javascript project examples,javascript project ideas,html css javascript projects with source code pdf,html css javascript projects github,html css javascript projects for resume,html css javascript projects pdf,html and javascript projects with source code,html css javascript projects templates,html css javascript projects ideas,javascript projects intermediate,javascript projects ideas,javascript projects in github,javascript project ideas for portfolio,javascript project ideas advanced,javascript project ideas reddit,javascript project in visual studio,javascript project in eclipse,javascript project in intellij,javascript interesting projects,intermediate javascript projects,interesting javascript projects,ideas for javascript projects,interviewbit javascript projects,if else javascript projects,intermediate html css javascript projects,intermediate javascript projects reddit,insane javascript projects,projects in javascript,projects in html css javascript,javascript projects john smilga,what projects can i do with javascript,javascript small projects examples,javascript projects with source code,javascript projects reddit,john smilga javascript projects,john smilga javascript projects github,khan academy javascript projects,popular javascript projects,top 10 javascript projects,javascript projects list,javascript projects learn,javascript project layout,js projects ltd,js projects list,js projects learn,javascript project lines of code,javascript project local,javascript large projects,javascript loop project,list of javascript projects,learn javascript projects,list of javascript projects for beginners,large javascript projects,little javascript projects,learn javascript by building projects,javascript live projects,best projects to learn javascript,learn javascript with projects free,learn javascript step by step by building projects,javascript projects medium,javascript projects mini,js projects mp3 download,javascript project management tool,javascript project management,js projects mr pray mp3 download,javascript project magic 8 ball,js projects mp3,js projects my old guitar,javascript project maker,mini javascript projects,medium javascript projects,machine learning javascript projects,mdn javascript projects,most popular javascript projects on github,medium level javascript projects,modular javascript projects,mini projects using html css and javascript,html css javascript php mysql projects,html-css-javascript php mysql projects github,javascript project naming convention,javascript project name,js projects ngizofeza mp3 download,js projects new album,javascript project node,js project npm,javascript new project,javascript projects on github,node js projects on github,javascript project with npm,nodejs javascript projects,sonarqube for mixed .net and javascript/typescript projects,javascript react native projects,next js project example,projects to do with javascript,js project ideas for beginners,javascript projects online,javascript projects open source,javascript projects open,javascript project organization,javascript project on todo list,javascript project object,javascript project on movie ticket booking system,javascript project on library management system,javascript oop projects,open source javascript projects,open source javascript projects for beginners,only javascript projects,oop javascript projects,online javascript projects,object oriented programming javascript projects,open source javascript projects to contribute,object oriented javascript projects,open source javascript projects github,open javascript projects,javascript projects portfolio,javascript projects pdf,javascript projects practice,100 javascript projects pdf,javascript projects raspberry pi,javascript and python projects,javascript projects with source code pdf,html css javascript practice projects,practice javascript projects,python javascript projects,pure javascript projects,php javascript projects,plain javascript projects,javascript project questions,javascript quiz project,javascript quiz project source code,javascript quick project,js quiz project,javascript project interview questions,quick javascript projects,project q examples,javascript example projects,javascript projects repository,javascript projects run,javascript project report,javascript project root path,javascript project runtime,javascript react projects,javascript resume projects,javascript related projects,raspberry pi javascript projects,real time javascript projects,real world javascript projects,reddit javascript projects,react javascript projects,real javascript projects,replit javascript projects,reddit beginner javascript projects,run javascript projects,javascript projects source code,javascript projects step by step,javascript projects source code free download,javascript project structure,javascript project structure best practices,js projects songs,javascript project setup,javascript project sample,javascript project system,js projects shaka zulu mp3 download,simple javascript projects,simple javascript projects for beginners with source code,simple javascript projects github,sample javascript projects,simple vanilla javascript projects,some javascript projects,skillcrush javascript projects,simple javascript projects pdf,super easy javascript projects,javascript projects to learn,javascript projects tutorials,javascript projects to do,javascript projects to make,javascript projects to work on,javascript projects to try,javascript projects to get a job reddit,javascript projects topics,javascript projects to contribute,top javascript projects,top javascript projects for beginners,top 10 beginner javascript projects,top javascript projects github,traversy media javascript projects,top 100 javascript projects,top open source javascript projects,typescript typescript and js with real javascript projects,projects to learn javascript,javascript projects udemy,javascript projects using api,javascript projects using promises,javascript projects using arrays,js projects uthando,javascript project using objects,javascript project using npm,javascript ui project,javascript use project,unique javascript projects,useful javascript projects,udemy - javascript projects for complete beginners,projects using html css and javascript,basic projects using html css and javascript,simple projects using javascript,udemy - javascript tutorial and projects course,javascript project visual studio,javascript project vscode,javascript project video,javascript vanilla projects,js project variables,javascript project in visual studio 2019,vanilla javascript projects for beginners,vanilla javascript projects github,vanilla javascript projects with source code,very basic javascript projects,vanilla javascript projects for portfolio,vanilla javascript projects john smilga,visual studio javascript projects,15 vanilla javascript projects,javascript projects with source code github,javascript projects w3schools,javascript projects with api,javascript projects website,javascript projects with explanation,w3schools javascript projects,w3schools html css javascript projects,projects with javascript,projects with html css and javascript,cool projects with javascript,javascript xmlhttprequest project,x-javascript,javascript projects youtube,js projects ft young stunna,react js projects youtube,js projects ft young stunna songs,js projects ft young stunna cinderella,node js projects youtube,js projects ft young stunna asiye,javascript projects for final year students,javascript projects that will get you hired,vanilla javascript project ideas,youtube javascript projects,9 awesome javascript projects for your resume,final year projects using javascript,js projects zamusic,javascript side project ideas,javascript coding projects for beginners,javascript react project ideas,z3 javascript,javascript projects to build,100 javascript projects for beginners,fun javascript projects for beginners,javascript projects 100,javascript 15 projects,100-javascript projects github,10 javascript projects,15 javascript projects freecodecamp,10 javascript projects in 10 hours,1000 javascript projects,15 javascript projects,15 beginner javascript projects,10 best javascript projects,javascript projects 2023,javascript projects 2022,js projects 2022,js projects 2022 songs,project zomboid js2000,react js projects 2022,22 javascript projects,20 javascript projects github,25 javascript projects,24 javascript projects,build 20 hands on projects in react and javascript,javascript 30 projects,javascript simple project ideas,three js examples,javascript projects for beginners github,40 javascript projects for beginners,50 javascript projects github,build 5 projects with html css & javascript,cool javascript project ideas,basic javascript project ideas,6 javascript projects pdf,javascript for beginners learn with 6 main projects,javascript 5 vs 6,javascript 6 features,learn javascript with 7 real world projects,javascript project topics

Hello Guys welcome to the new blog where we are going to create a Cool Animated Favorite Button using HTML, CSS, JavaScript with free source code. In this blog you will get a download button of the whole Source code file at bottom of page. You can also follow me on Instagram (https://instagram.com/coding.ayush) and Join Our Telegram Channel (https://t.me/codingayush). Enjoy the code !!

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <title>Favorite Button - CodingAyush</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
  <link rel="stylesheet" href="./style.css">


  <button class="favorite-button">
    <div class="icon">
      <div class="star"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js'></script>
  <script src="./script.js"></script>

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
* {
  box-sizing: inherit;
*:before, *:after {
  box-sizing: inherit;

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #11131e;

.favorite-button {
  --background-default: #313440;
  --text-color-default: #FAFBFF;
  --star-color-default: #62677C;
  --star-face-color-default: #1F2128;
  --star-color-active: #F6C206;
  --star-face-color-active: #845901;
  --star-hole: #16181E;
  --star-hole-inner: #20232C;
  --button-y: 0px;
  --star-y: 0px;
  --star-scale: 1;
  --star-rotate: 0deg;
  --star-hole-scale: 0;
  --star-face-scale: 1;
  --text-x: 0px;
  --text-o: 1;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: none;
  min-width: 125px;
  padding: 12px 24px 12px 16px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  color: var(--text-color-default);
  transform: translateY(var(--button-y)) translateZ(0);
.favorite-button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 9px;
  transition: transform 0.2s;
  transform: scale(var(--background-scale-x, 1), var(--background-scale-y, 1)) translateZ(0);
  background: var(--background-default);
.favorite-button:active {
  --background-scale-x: .98;
  --background-scale-y: .96;
.favorite-button span {
  display: block;
  opacity: var(--text-o);
  transform: translateX(var(--text-x));
.favorite-button .icon {
  width: 36px;
  height: 119px;
  display: flex;
  pointer-events: none;
  position: relative;
  -webkit-clip-path: ellipse(150% 50% at 50% 50%);
          clip-path: ellipse(150% 50% at 50% 50%);
  margin: -100px 2px 0 -8px;
.favorite-button .icon:before {
  content: "";
  margin-top: auto;
  display: block;
  width: 36px;
  height: 12px;
  background: var(--star-hole);
  box-shadow: inset 0 3px 0 0 var(--star-hole-inner);
  border-radius: 100px/30px;
  transform: scale(var(--star-hole-scale));
  transform-origin: 50% 100%;
.favorite-button .icon .star {
  width: 20px;
  height: 19px;
  position: absolute;
  left: 8px;
  bottom: 0;
  transform: translateY(var(--star-y)) rotate(var(--star-rotate)) scale(var(--star-scale));
  border-radius: var(--star-radius, 0px);
  background: var(--star-color, var(--star-color-default));
  -webkit-clip-path: var(--star-clip, polygon(10px 0, 13px 6px, 20px 7px, 15px 12px, 16px 19px, 10px 15px, 4px 19px, 5px 12px, 0 7px, 7px 6px));
          clip-path: var(--star-clip, polygon(10px 0, 13px 6px, 20px 7px, 15px 12px, 16px 19px, 10px 15px, 4px 19px, 5px 12px, 0 7px, 7px 6px));
  transition: border-radius 0.2s, background 0.2s, -webkit-clip-path 0.2s;
  transition: clip-path 0.2s, border-radius 0.2s, background 0.2s;
  transition: clip-path 0.2s, border-radius 0.2s, background 0.2s, -webkit-clip-path 0.2s;
.favorite-button .icon .star:before, .favorite-button .icon .star:after {
  content: "";
  position: absolute;
  background: var(--star-face-color, var(--star-face-color-default));
  transition: background 0.2s, box-shadow 0.2s;
.favorite-button .icon .star:before {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  left: 7px;
  top: 8px;
  box-shadow: 4px 0 0 0 var(--star-face-color, var(--star-face-color-default));
  transform: scaleY(var(--star-face-scale));
.favorite-button .icon .star:after {
  width: 4px;
  height: 2px;
  border-radius: var(--star-face-radius, 2px 2px 0 0);
  left: 8px;
  top: 11px;
  transition: border-radius 0.2s;
.favorite-button.star-round {
  --star-clip: polygon(10px 0, 20px 0, 20px 7px, 20px 12px, 20px 19px, 10px 19px, 0 19px, 0 12px, 0 7px, 0 0);
  --star-radius: 50%;
.favorite-button.active {
  --star-color: var(--star-color-active);
  --star-face-color: var(--star-face-color-active);
  --star-face-radius: 0 0 2px 2px;
document.querySelectorAll('.favorite-button').forEach(button => {
    button.addEventListener('click', e => {

        if(button.classList.contains('animated')) {

        gsap.to(button, {
            keyframes: [{
                '--star-y': '-36px',
                duration: .3,
                ease: 'power2.out'
            }, {
                '--star-y': '48px',
                '--star-scale': .4,
                duration: .325,
                onStart() {
            }, {
                '--star-y': '-64px',
                '--star-scale': 1,
                duration: .45,
                ease: 'power2.out',
                onStart() {
                    setTimeout(() => button.classList.remove('star-round'), 100)
            }, {
                '--star-y': '0px',
                duration: .45,
                ease: 'power2.in'
            }, {
                '--button-y': '3px',
                duration: .11
            }, {
                '--button-y': '0px',
                '--star-face-scale': .65,
                duration: .125
            }, {
                '--star-face-scale': 1,
                duration: .15
            clearProps: true,
            onComplete() {

        gsap.to(button, {
            keyframes: [{
                '--star-hole-scale': .8,
                duration: .5,
                ease: 'elastic.out(1, .75)'
            }, {
                '--star-hole-scale': 0,
                duration: .2,
                delay: .2

        gsap.to(button, {
            '--star-rotate': '360deg',
            duration: 1.55,
            clearProps: true

Post a Comment

Previous Post Next Post