Facebook-like Click-to-grow Like Button

Developer
Paul Sullivan
Size
2,607 Kb
Views
8,096
  1. Facebook-like Click-to-grow Like Button Previews
  2. Facebook-like Click-to-grow Like Button HTML Codes
  3. Facebook-like Click-to-grow Like Button CSS Codes
  4. Facebook-like Click-to-grow Like Button JS Codes

How do I make an facebook-like click-to-grow like button?

Recreating FBs messenger like button. Click and hold to grow it.. What is a facebook-like click-to-grow like button? How do you make a facebook-like click-to-grow like button? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.

Facebook-like Click-to-grow Like Button Previews
IQ Test

Facebook-like Click-to-grow Like Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook-like Click-to-grow Like Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='clicker'> <i class='fa fa-thumbs-up'></i>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook-like Click-to-grow Like Button - Script Codes CSS Codes

#clicker { position: fixed; top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; cursor: pointer; color: #0084FF; font-size: 50px;
}
.wiggle { -webkit-animation: wiggle 1.25s ease forwards; animation: wiggle 1.25s ease forwards;
}
@-webkit-keyframes wiggle { 0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes wiggle { 0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

Facebook-like Click-to-grow Like Button - Script Codes JS Codes

var timeout, clicker = $('#clicker');
var count = 25;
clicker.mousedown(function() { timeout = setInterval(function() { if (count >= 300) { count = 50; clicker.removeClass('wiggle'); } else { clicker.addClass('wiggle'); clicker.css('font-size', count++ *.9 + 'px'); clicker.css('margin-left', -.5*count++ + 'px'); clicker.css('margin-top', -.5*count++ + 'px'); } }, 20); return false;
});
$(document).mouseup(function() { clearInterval(timeout); return false;
});
Facebook-like Click-to-grow Like Button - Script Codes
Facebook-like Click-to-grow Like Button - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 3.5
Size 2,607 Kb
Views 8,096
Do you need developer help for Facebook-like Click-to-grow Like Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paul Sullivan (pwsm50) Script Codes
Name
CSS Particle Box
Crazed Bacteria
Dart Scoreboard
Full screen burger menu
Colorful Animated Border
Asana Style Buttons
A Pen by Paul Sullivan
Another Simple CSS load animation
Circular Audio Bars
Flying Bee
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!