Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Apr 2, 2019

Embed
What would you like to do?
Simple Like Button #codevember
<div class="like-content">
<span>
Did you like this review? Press like to make it easier for others to see
</span>
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true"></i> Like
</button>
</div>
$(function(){
$(document).one('click', '.like-review', function(e) {
$(this).html('<i class="fa fa-heart" aria-hidden="true"></i> You liked this');
$(this).children('.fa-heart').addClass('animate-like');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/7ad89d9866.js"></script>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
@keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.