"like"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ohansemmanuel/pen/dVdvJQ" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">/*======================== SASS definitions =======================*/ /*======================== FLEXBOX ALIGNMENT =======================*/ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } /*======================== BASIC styles =======================*/ * { box-sizing: border-box; } /*======================== BUTTON styles =======================*/ .clap { position: relative; outline: 1px solid transparent; border-radius: 50%; border: 1px solid #bdc3c7; width: 80px; height: 80px; background: none; } .clap:after { content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 50%; width: 79px; height: 79px; } .clap:hover { cursor: pointer; border: 1px solid #27ae60; transition: border-color 0.3s ease-in; } .clap:hover:after { animation: shockwave 1s ease-in infinite; } .clap svg { width: 40px; fill: none; stroke: #27ae60; stroke-width: 2px; } .clap svg.checked { fill: #27ae60; stroke: #fff; stroke-width: 1px; } .clap .clap--count { position: absolute; top: -50px; left: 20px; font-size: 0.8rem; color: white; background: #27ae60; border-radius: 50%; height: 40px; width: 40px; line-height: 40px; } .clap .clap--count-total { position: absolute; font-size: 0.8rem; width: 80px; text-align: center; left: 0; top: -22.85714px; color: #bdc3c7; } /*==================== Message ======================*/ #message { position: absolute; bottom: 20px; color: #27ae60; line-height: 1.52rem; padding: 1rem; font-size: 0.9rem; } #message a { color: #bdc3c7; } @keyframes shockwave { 0% { transform: scale(1); box-shadow: 0 0 2px #27ae60; opacity: 1; } 100% { transform: scale(1); opacity: 0; box-shadow: 0 0 50px #145b32, inset 0 0 10px #27ae60; } } </style></head><body> <button id="clap" class="clap"> <span> <svg id="clap--icon" xmlns="http://www.w3.org/2000/svg" viewBox="-549 338 100.1 125"> <path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z"/> <path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9"/> </svg> </span> <span id="clap--count" class="clap--count"></span> <span id="clap--count-total" class="clap--count-total"></span> </button> <aside id="message">In case you didn't know, you gotta click the clap button above

Related: See More

Vue Argon Design System

Questions / Comments: