Live preview
Preview settings
Changes appear as you type. Use Tab to test keyboard focus.
⌘ / Ctrl + S saves locally
Praashoo7's hover button
HTML, CSS or Tailwind, and a little JavaScript. One button or a group of up to six.
By Praashoo7
Button submission checks
Checks will appear after the preview updates.
Buttons only: no full pages, forms, cards or navigation. Put scripts in the JavaScript tab. Tailwind uses utilities from HTML and JavaScript; use complete class names. Custom CSS supports plain CSS, without @apply, imports or plugins.
Accessibility quick check
Waiting for the rendered preview…
Try Tab, Enter and Space in the preview. Check the focus ring, hover and disabled states, then enable Reduce motion. These checks are guidance, not an accessibility certification.
Explore freely here. Remix to publish your version with credit to the creator.
About Praashoo7's hover button
Praashoo7's hover button is an animated CSS button by Praashoo7. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.
- Effects and categories
- Hover effects, Icon, Social, Animated
- Using this example
- Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
HTML
<div class="main">
<div class="card">
<svg fill-rule="nonzero" height="30px" width="30px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="instagram">
<g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero">
<g transform="scale(8,8)">
<path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path>
</g>
</g>
</svg>
</div>
<div class="card">
<svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="twitter">
<path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path>
</svg>
</div>
<div class="card">
<svg height="30px" width="30px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="dribble">
<path d="M20,38.5C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5S38.5,9.799,38.5,20S30.201,38.5,20,38.5z"></path>
<path d="M20,2c9.925,0,18,8.075,18,18s-8.075,18-18,18S2,29.925,2,20S10.075,2,20,2 M20,1 C9.507,1,1,9.507,1,20s8.507,19,19,19s19-8.507,19-19S30.493,1,20,1L20,1z" fill="#ea4c89"></path>
<path d="M28.352 36.914c0 0-3.032-21.087-15.63-34.292M1.269 17.848c0 0 24.2 2.117 32.075-11.102M7.804 34.152c0 0 8.624-19.807 31.058-12.194" stroke-miterlimit="10" stroke="#ea4c89" fill="none"></path>
</svg>
</div>
<div class="card">
<svg height="30px" width="30px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" class="codepen">
<path d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"></path>
</svg>
</div>
<div class="card">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="23px" width="23px" class="button-demo">
<path fill="url(#paint0_linear_501_142)" d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"></path>
<path fill="url(#paint1_linear_501_142)" d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"></path>
<path fill="url(#paint2_linear_501_142)" d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"></path>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0" id="paint0_linear_501_142">
<stop stop-color="#BF66FF"></stop>
<stop stop-color="#6248FF" offset="0.510417"></stop>
<stop stop-color="#00DDEB" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0" id="paint1_linear_501_142">
<stop stop-color="#BF66FF"></stop>
<stop stop-color="#6248FF" offset="0.510417"></stop>
<stop stop-color="#00DDEB" offset="1"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0" id="paint2_linear_501_142">
<stop stop-color="#BF66FF"></stop>
<stop stop-color="#6248FF" offset="0.510417"></stop>
<stop stop-color="#00DDEB" offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div class="card">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="30px" height="30px" class="discord">
<path d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"></path>
</svg>
</div>
<div class="card">
<svg height="30px" width="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="github">
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
</svg>
</div>
<div class="card">
<svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="telegram">
<path d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z"></path>
<path d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z" fill="#fff"></path>
<path d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z" fill="#b0bec5"></path>
<path d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z" fill="#cfd8dc"></path>
</svg>
</div>
<div class="card">
<svg xml:space="preserve" viewBox="0 0 256 256" height="30" width="30" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="reddit">
<defs></defs>
<g transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" style="stroke: none; border-radius:50%; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;">
<circle transform="matrix(1 0 0 1 0 0)" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" r="45" cy="45" cx="45"></circle>
<path stroke-linecap="round" transform="matrix(1 0 0 1 0 0)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" d="M 75.011 45 c -0.134 -3.624 -3.177 -6.454 -6.812 -6.331 c -1.611 0.056 -3.143 0.716 -4.306 1.823 c -5.123 -3.49 -11.141 -5.403 -17.327 -5.537 l 2.919 -14.038 l 9.631 2.025 c 0.268 2.472 2.483 4.262 4.955 3.993 c 2.472 -0.268 4.262 -2.483 3.993 -4.955 s -2.483 -4.262 -4.955 -3.993 c -1.421 0.145 -2.696 0.973 -3.4 2.204 L 48.68 17.987 c -0.749 -0.168 -1.499 0.302 -1.667 1.063 c 0 0.011 0 0.011 0 0.022 l -3.322 15.615 c -6.264 0.101 -12.36 2.025 -17.55 5.537 c -2.64 -2.483 -6.801 -2.36 -9.284 0.291 c -2.483 2.64 -2.36 6.801 0.291 9.284 c 0.515 0.481 1.107 0.895 1.767 1.186 c -0.045 0.66 -0.045 1.32 0 1.98 c 0 10.078 11.745 18.277 26.23 18.277 c 14.485 0 26.23 -8.188 26.23 -18.277 c 0.045 -0.66 0.045 -1.32 0 -1.98 C 73.635 49.855 75.056 47.528 75.011 45 z M 30.011 49.508 c 0 -2.483 2.025 -4.508 4.508 -4.508 c 2.483 0 4.508 2.025 4.508 4.508 s -2.025 4.508 -4.508 4.508 C 32.025 53.993 30.011 51.991 30.011 49.508 z M 56.152 62.058 v -0.179 c -3.199 2.405 -7.114 3.635 -11.119 3.468 c -4.005 0.168 -7.919 -1.063 -11.119 -3.468 c -0.425 -0.515 -0.347 -1.286 0.168 -1.711 c 0.447 -0.369 1.085 -0.369 1.544 0 c 2.707 1.98 6.007 2.987 9.362 2.83 c 3.356 0.179 6.667 -0.783 9.407 -2.74 c 0.492 -0.481 1.297 -0.47 1.779 0.022 C 56.655 60.772 56.644 61.577 56.152 62.058 z M 55.537 54.34 c -0.078 0 -0.145 0 -0.224 0 l 0.034 -0.168 c -2.483 0 -4.508 -2.025 -4.508 -4.508 s 2.025 -4.508 4.508 -4.508 s 4.508 2.025 4.508 4.508 C 59.955 52.148 58.02 54.239 55.537 54.34 z"></path>
</g>
</svg>
</div>
<p class="text">HOVER<br><br>FOR<br><br>SOCIAL</p>
<div class="main_back"></div>
</div>CSS
.main_back {
position: absolute;
border-radius: 10px;
transform: rotate(90deg);
width: 11em;
height: 11em;
background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
z-index: -2;
box-shadow: inset 0px 0px 180px 5px #ffffff;
}
.main {
display: flex;
flex-wrap: wrap;
width: 14em;
align-items: center;
justify-content: center;
z-index: -1;
}
.card {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-top-left-radius: 10px;
background: lightgrey;
transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,
0.2s background-image ease-in-out;
background: rgba(255, 255, 255, 0.596);
backdrop-filter: blur(5px);
border: 1px solid transparent;
-webkit-backdrop-filter: blur(5px);
}
.card .instagram {
opacity: 0;
transition: 0.2s ease-in-out;
fill: #cc39a4;
}
.card:nth-child(2) {
border-radius: 0px;
}
.card:nth-child(2) .twitter {
opacity: 0;
transition: 0.2s ease-in-out;
fill: #03a9f4;
}
.card:nth-child(3) {
border-top-right-radius: 10px;
border-top-left-radius: 0px;
}
.card:nth-child(3) .dribble {
opacity: 0;
transition: 0.2s ease-in-out;
fill: #ffb5d2;
}
.card:nth-child(4) {
border-radius: 0px;
}
.card:nth-child(4) .codepen {
opacity: 0;
transition: 0.2s ease-in-out;
fill: black;
}
.card:nth-child(5) {
border-radius: 0px;
}
.card:nth-child(5) .button-demo {
position: absolute;
margin-left: 0.2em;
margin-top: 0.2em;
opacity: 0;
transition: 0.2s ease-in-out;
}
.card:nth-child(6) {
border-radius: 0px;
}
.card:nth-child(6) .discord {
opacity: 0;
transition: 0.2s ease-in-out;
fill: #8c9eff;
}
.card:nth-child(7) {
border-bottom-left-radius: 10px;
border-top-left-radius: 0px;
}
.card:nth-child(7) .github {
opacity: 0;
transition: 0.2s ease-in-out;
fill: black;
}
.card:nth-child(8) {
border-radius: 0px;
}
.card:nth-child(8) .telegram {
opacity: 0;
transition: 0.2s ease-in-out;
fill: #29b6f6;
}
.card:nth-child(9) {
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
}
.card:nth-child(9) .reddit {
opacity: 0;
transition: 0.2s ease-in-out;
}
.main:hover {
width: 14em;
cursor: pointer;
}
.main:hover .main_back {
opacity: 0;
}
.main:hover .card {
margin: 0.2em;
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
}
.main:hover .card:nth-child(5) {
border: transparent;
}
.main:hover .text {
opacity: 0;
z-index: -3;
}
.main:hover .instagram {
opacity: 1;
}
.main:hover .twitter {
opacity: 1;
}
.main:hover .dribble {
opacity: 1;
}
.main:hover .codepen {
opacity: 1;
}
.main:hover .button-demo {
opacity: 1;
}
.main:hover .discord {
opacity: 1;
}
.main:hover .github {
opacity: 1;
}
.main:hover .telegram {
opacity: 1;
}
.main:hover .reddit {
opacity: 1;
}
.card:nth-child(1):hover {
background-color: #cc39a4;
}
.card:nth-child(1):hover .instagram {
fill: white;
}
.card:nth-child(2):hover {
background-color: #03a9f4;
}
.card:nth-child(2):hover .twitter {
fill: white;
}
.card:nth-child(3):hover {
background-color: #ffb5d2;
}
.card:nth-child(3):hover .dribble {
fill: white;
}
.card:nth-child(4):hover {
background-color: #1e1f26;
}
.card:nth-child(4):hover .codepen {
fill: white;
}
.card:nth-child(5):hover {
animation: backgroundIMG 0.1s;
animation-fill-mode: forwards;
}
.card:nth-child(5):hover .button-demo #paint0_linear_501_142 stop {
stop-color: white;
}
.card:nth-child(5):hover .button-demo #paint1_linear_501_142 stop {
stop-color: white;
}
.card:nth-child(5):hover .button-demo #paint2_linear_501_142 stop {
stop-color: white;
}
@keyframes backgroundIMG {
100% {
background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
}
}
.card:nth-child(6):hover {
background-color: #8c9eff;
}
.card:nth-child(6):hover .discord {
fill: white;
}
.card:nth-child(7):hover {
background-color: black;
}
.card:nth-child(7):hover .github {
fill: white;
}
.card:nth-child(8):hover {
background-color: #29b6f6;
}
.card:nth-child(8):hover .telegram > path:nth-of-type(1) {
fill: white;
}
.card:nth-child(8):hover .telegram > path:nth-of-type(2) {
fill: #29b6f6;
}
.card:nth-child(8):hover .telegram > path:nth-of-type(3) {
fill: #29b6f6;
}
.card:nth-child(9):hover {
background-color: rgb(255, 69, 0);
}
.card:nth-child(9) .reddit > g circle {
fill: rgb(255, 69, 0);
}
.card:nth-child(9) .reddit > g path {
fill: white;
}
.text {
position: absolute;
font-size: 0.7em;
transition: 0.4s ease-in-out;
color: black;
text-align: center;
font-weight: bold;
letter-spacing: 0.33em;
z-index: 3;
}