PriyankaTamhankar01's button

About PriyankaTamhankar01's button

PriyankaTamhankar01's button is an animated CSS button by @PriyankaTamhankar01. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, Social

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>  
        <nav style="--count: 4;">
          <ul>
            <li style="--index: 1;">
              <a href="#" target="_blank" rel="noreferrer noopener">
                <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
      </svg>
      Socials</span>
              </a>
            </li>
            <li style="--index: 2;">
                <a href="https://github.com/PriyankaTamhankar01" target="_blank" rel="noreferrer noopener">
                    <span>
                      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Github</title><path d="M12 0C5.37 0 0 5.37 0 12c0 5.28 3.438 9.732 8.205 11.303.6.112.818-.258.818-.576 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.608-4.042-1.608-.546-1.386-1.333-1.756-1.333-1.756-1.087-.741.082-.726.082-.726 1.204.084 1.838 1.235 1.838 1.235 1.071 1.842 2.807 1.308 3.487.996.108-.776.419-1.307.76-1.607-2.665-.302-5.466-1.333-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.125-.302-.535-1.523.117-3.176 0 0 1.006-.322 3.3 1.23.957-.267 1.98-.4 3-.405 1.02.005 2.043.138 3 .405 2.29-1.552 3.294-1.23 3.294-1.23.656 1.653.247 2.874.122 3.176.767.84 1.23 1.91 1.23 3.22 0 4.61-2.806 5.625-5.475 5.92.43.372.817 1.096.817 2.22 0 1.604-.015 2.895-.015 3.286 0 .318.213.688.825.574C20.565 21.73 24 17.28 24 12c0-6.63-5.37-12-12-12z"/></svg>
                      Github
                    </span>
                  </a>
            </li>
            <li style="--index: 3;">
                <a href="https://www.linkedin.com/in/priyanka-tamhankar-2001" target="_blank" rel="noreferrer noopener">
                    <span>
                          <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M21.5,3h-19C1.7,3,1,3.7,1,4.5v15C1,20.3,1.7,21,2.5,21h19c0.8,0,1.5-0.7,1.5-1.5v-15C23,3.7,22.3,3,21.5,3z M8,19h-3v-9h3V19z M6.5,8.4C5.7,8.4,5,7.7,5,6.9C5,6.1,5.7,5.4,6.5,5.4C7.3,5.4,8,6.1,8,6.9C8,7.7,7.3,8.4,6.5,8.4z M20,19h-3V14.6c0-1.6-0.6-2.7-1.9-2.7c-1,0-1.6,0.7-1.9,1.4c-0.1,0.2-0.1,0.4-0.1,0.7V19h-3V10h2.8v1h0c0.4-0.6,1.3-1.3,2.8-1.3c2,0,3.5,1.3,3.5,4.1V19z"/></svg>
                          LinkedIn
                    </span>
                  </a>
            </li>
            <li style="--index: 4;">
              
              <a href="https://twitter.com/Priyanka310501" target="_blank" rel="noreferrer noopener">
                <span>
                  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                  Twitter
                </span>
              </a>
            </li>
          </ul>
        </nav>
      </main>
</body>
</html>

@import url(https://unpkg.com/open-props/open-props.min.css);
  @import url(https://unpkg.com/open-props/normalize.min.css);

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--gray-12);
}

ul {
  padding: 0;
  display: inline-grid;
  grid-auto-flow: column;
  list-style-type: none;
  grid-template-columns: auto repeat(3, calc((var(--active, 0) * 130px) + 10px));
  transition: grid-template-columns 0.35s var(--ease-elastic-1);
}

main {
  width: 66ch;
}

li {
  display: grid;
  justify-content: end;
  z-index: calc(var(--count) - var(--index));
}

nav {
  position: relative;
}

nav > button {
  position: absolute;
  left: 0;
  background: red;
  z-index: var(--count);
}

a {
  background: hsl(0 0% 60% / 0.18);
  display: inline-block;
  padding: var(--size-2) var(--size-4);
  border-radius: var(--radius-5);
  margin: 0;
  color: var(--gray-0);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-0);
  backdrop-filter: blur(40px);
  transition: color 0.2s, background 0.2s;  
}

a:visited {
  color: var(--gray-0);
}

svg {
  height: 24px;
  aspect-ratio: 1;
  fill: currentColor;
}

span {
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 16px 1fr;
  gap: 0.25rem;
}

li:is(
  :nth-of-type(2),
  :nth-of-type(3),
  :nth-of-type(4)
) span {
  opacity: var(--active, 0);
}

li:is(
  :nth-of-type(2),
  :nth-of-type(3),
  :nth-of-type(4)
) a:is(:hover, :focus) {
  background: var(--gray-0);
  color: var(--gray-12);
}

a:focus-visible {
  outline-color: transparent;
}

ul:is(:focus-within, :hover) {
  --active: 1;
}