Love button

Developer
Kasper Mikiewicz
Size
3,597 Kb
Views
44,528
  1. Love button Previews
  2. Love button HTML Codes
  3. Love button CSS Codes
  4. Love button JS Codes

How do I make an love button?

Original project here: http://designitcodeit.com/i/9. What is a love button? How do you make a love button? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.

Love button Previews
IQ Test

Love button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Love button</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background: #f5f5f5; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body { margin: 30px auto 0 auto; width: 450px; font-size: 75%;
}
h3 { margin-top: 30px; font-size: 18px; color: #555;
}
p { padding-left: 10px; }
/* * Basic button style */
.btn { box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset; border-radius: 3px; border: 1px solid; display: inline-block; height: 18px; line-height: 18px; padding: 0 8px; position: relative; font-size: 12px; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/* * Counter button style */
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after { border-radius: 3px; border: 1px solid #d3d3d3; background-color: #eee; padding: 0 8px; color: #777; content: attr(data-count); left: 100%; margin-left: 8px; margin-right: -13px; position: absolute; top: -1px;
}
.btn-counter:before { transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); background-color: #eee; border: 1px solid #d3d3d3; border-right: 0; border-top: 0; content: ''; position: absolute; right: -13px; top: 5px; height: 6px; width: 6px; z-index: 1; zoom: 1;
}
/* * Custom styles */
.btn { background-color: #dbdbdb; border-color: #bbb; color: #666;
}
.btn:hover,
.btn.active { text-shadow: 0 1px 0 #b12f27; background-color: #f64136; border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span { color: #b12f27; text-shadow: 0 1px 0 rgba(255,255,255,0.3);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h3>Basic button</h3>
<p> <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span></a> <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span> Love it</a>
</p>
<h3>Button with counter - active/inactive</h3>
<p> <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span></a> <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span> Love it</a>
</p>
<h3>Button with counter for people who likes to click</h3>
<p> <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span></a> <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span> Love it</a>
</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Love button - Script Codes CSS Codes

html { background: #f5f5f5; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body { margin: 30px auto 0 auto; width: 450px; font-size: 75%;
}
h3 { margin-top: 30px; font-size: 18px; color: #555;
}
p { padding-left: 10px; }
/* * Basic button style */
.btn { box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset; border-radius: 3px; border: 1px solid; display: inline-block; height: 18px; line-height: 18px; padding: 0 8px; position: relative; font-size: 12px; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/* * Counter button style */
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after { border-radius: 3px; border: 1px solid #d3d3d3; background-color: #eee; padding: 0 8px; color: #777; content: attr(data-count); left: 100%; margin-left: 8px; margin-right: -13px; position: absolute; top: -1px;
}
.btn-counter:before { transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); background-color: #eee; border: 1px solid #d3d3d3; border-right: 0; border-top: 0; content: ''; position: absolute; right: -13px; top: 5px; height: 6px; width: 6px; z-index: 1; zoom: 1;
}
/* * Custom styles */
.btn { background-color: #dbdbdb; border-color: #bbb; color: #666;
}
.btn:hover,
.btn.active { text-shadow: 0 1px 0 #b12f27; background-color: #f64136; border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span { color: #b12f27; text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

Love button - Script Codes JS Codes

/* * Love button for Design it & Code it * http://designitcodeit.com/i/9 */
$('.btn-counter').on('click', function(event, count) { event.preventDefault(); var $this = $(this), count = $this.attr('data-count'), active = $this.hasClass('active'), multiple = $this.hasClass('multiple-count'); // First method, allows to add custom function // Use when you want to do an ajax request /* if (multiple) { $this.attr('data-count', ++count); // Your code here } else { $this.attr('data-count', active ? --count : ++count).toggleClass('active'); // Your code here } */ // Second method, use when ... I dunno when but it looks cool and that's why it is here $.fn.noop = $.noop; $this.attr('data-count', ! active || multiple ? ++count : --count )[multiple ? 'noop' : 'toggleClass']('active');
});
Love button - Script Codes
Love button - Script Codes
Home Page Home
Developer Kasper Mikiewicz
Username Idered
Uploaded November 21, 2022
Rating 3.5
Size 3,597 Kb
Views 44,528
Do you need developer help for Love 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!

Kasper Mikiewicz (Idered) Script Codes
Name
Comments thread
Notifications
Hello bar
Dropdown menu
Degree Picker
Flat switch
2 CSS objects that will simplify your HTML structure
Pure CSS modal box
A Pen by Kasper Mikiewicz
Pagination
Create amazing SEO content 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!