Edit Question - KnowledgeHub

Title Body

I have made a heart-shaped button using CSS. Here is the JSFiddle link of my code. #heart { height: 50px; width: 50px; position: relative; } #heart .outline:before, #heart .outline:after { position: absolute; content: ""; left: 28px; top: 1px; width: 15px; height: 27px; background: #d53423; -moz-border-radius: 50px 50px 0 0; border-radius: 85px 60px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart .outline:after { left: 13px; -webkit-transform: rotate(45deg); border-radius: 45px 60px 0 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } $("#heart").on('submit', function(e) { console.log('click heart support'); e.preventDefault(); $('#heart .outline:before').css('background', 'grey'); } ); <form id="heart"> <button id="like_btn" class="outline" type="submit"></button> </form> When I click the form button, I want this heart-shaped button to change its colour. However, this heart-shaped button is made from CSS pseudo-elements and hence, I c

Tags (comma-separated) Cancel