WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Like button
694
Viiper10
Open In Editor
Publish Your Code
Recommended
28 May 2024
Delete button
31 July 2025
HTML Neon Button Example
18 October 2025
CSS Button UI Sxrgxx Animation
HTML
Copy
Like
Unlike
CSS
Copy
/* From Uiverse.io by Zain-Muhammad */ .like-unlike-radio { --inactive-color: #515254; --active-color: #1877f2; --hover: #515254; display: flex; align-items: center; column-gap: 24px; flex-shrink: 0; } .like-unlike-radio .custom-radio-fb { display: none; } .like-unlike-radio .feedback-label { display: flex; flex-direction: column; align-items: center; row-gap: 10px; font-size: 14px; font-weight: 600; color: var(--inactive-color); margin: 0; cursor: pointer; transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; } .like-unlike-radio .feedback-label:hover { color: var(--hover); } .icon { transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; } .like-unlike-radio .feedback-label:hover .icon { transform: scale(1.3); } .like-unlike-radio .custom-radio-fb:checked ~ .feedback-label { color: var(--active-color); } .like-unlike-radio .custom-radio-fb:checked ~ .feedback-label svg { animation: keyframes-fill 0.2s ease-in-out; } /* ------ Animation ------ */ @keyframes keyframes-fill { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2) rotate(-10deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */