Using HTML/CSS to Implement the Twitter ‘Turn into X’ Button-PANDA

In web design and development, for some special-demand buttons, such as Twitter’s “Turn into X” button, we can achieve them with the help of HTML and CSS. By using HTML and CSS, we can give the “Turn into X” button unique styles and dynamic effects, making it more attractive to users and improving the convenience of user operations.

Here is the specific code:

HTML


<button class="button">
  <a href="#" class="no-link-style">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" style="null" class="icon icons8-Twitter-Filled">
      <path d="M49.5,10.9c-1.8,0.8-3.7,1.3-5.7,1.5c2.1-1.3,3.7-3.4,4.5-5.9c-2,1.2-4.2,2.1-6.6,2.6c-1.9-2-4.6-3.2-7.6-3.2c-5.8,0-10.5,4.7-10.5,10.5c0,0.8,0.1,1.6,0.4,2.3C11,18,6.3,15.2,3.4,11.5C2.5,13.1,2,14.9,2,16.7c0,3.6,1.8,6.8,4.6,8.6c-1.7,0-3.3-0.5-4.7-1.3v0.1c0,5,3.5,9.2,8.2,10.2c-0.9,0.2-1.8,0.3-2.7,0.3c-0.7,0-1.4,0-2-0.1c1.4,4.3,5.4,7.4,10.2,7.5c-3.7,2.9-8.3,4.6-13.3,4.6c-0.9,0-1.8,0-2.7-0.1c4.8,3.1,10.5,4.9,16.7,4.9c20,0,30.9-16.6,30.9-30.9c0-0.5,0-1.1,0-1.6C46.8,14.6,48.3,12.9,49.5,10.9z" fill="#ffffff"></path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="125" height="125" viewBox="0 0 50 50" style="null" class="icon icons8-X">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#ffffff"></path>
    </svg>
  </a>
</button>
<br>

CSS

.button {
  background-color: #1DA1F2;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  animation: sway 2s infinite alternate;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  transition: transform 0.5s, box-shadow 0.5s;
}

.button:hover {
  transform: rotate(-360deg);
  box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5);
}

@keyframes grow {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(10);
  }
}

@keyframes glow {
  0% {
    text-shadow: gold 1px 1px 1px;
  }

  100% {
    text-shadow: gold 0 0 10px gold;
  }
}

.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s;
}

.icon:hover {
  transform: scale(1.5);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9))
}

.icon.icons8-X {
  display: none;
}

.button:hover .icons8-Twitter-Filled {
  display: none;
}

.button:hover .icons8-X {
  display: block;
  position: relative;
  top: 3em;
  left: 3em;
  align: center;
}

.follow-text {
  color: white;
  position: relative;
  top: 3em;
  left: -4em;
  transition: transform 0.5s;
}

.follow-text:hover {
  transform: scale(1.2);
  color: rgba(31,81,255,100);
  filter: drop-shadow(2px 2px 4px rgba(31,81,255,2.0))
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      background-color: #1DA1F2;
      border: none;
      border-radius: 50%;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
      animation: sway 2s infinite alternate;
      width: 70px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 500px;
      transition: transform 0.5s, box-shadow 0.5s;
    }

    .button:hover {
      transform: rotate(-360deg);
      box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5);
    }

    @keyframes grow {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(10);
      }
    }

    @keyframes glow {
      0% {
        text-shadow: gold 1px 1px 1px;
      }

      100% {
        text-shadow: gold 0 0 10px gold;
      }
    }

    .icon {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
      transition: transform 0.5s;
    }

    .icon:hover {
      transform: scale(1.5);
      filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.9))
    }

    .icon.icons8-X {
      display: none;
    }

    .button:hover .icons8-Twitter-Filled {
      display: none;
    }

    .button:hover .icons8-X {
      display: block;
      position: relative;
      top: 3em;
      left: 3em;
      align: center;
    }

    .follow-text {
      color: white;
      position: relative;
      top: 3em;
      left: -4em;
      transition: transform 0.5s;
    }

    .follow-text:hover {
      transform: scale(1.2);
      color: rgba(31, 81, 255, 100);
      filter: drop-shadow(2px 2px 4px rgba(31, 81, 255, 2.0))
    }
  </style>
</head>

<body>


  <button class="button">
    <a href="#" class="no-link-style">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px"
        width="50" height="50" viewBox="0 0 50 50" style="null" class="icon icons8-Twitter-Filled">
        <path
          d="M49.5,10.9c-1.8,0.8-3.7,1.3-5.7,1.5c2.1-1.3,3.7-3.4,4.5-5.9c-2,1.2-4.2,2.1-6.6,2.6c-1.9-2-4.6-3.2-7.6-3.2c-5.8,0-10.5,4.7-10.5,10.5c0,0.8,0.1,1.6,0.4,2.3C11,18,6.3,15.2,3.4,11.5C2.5,13.1,2,14.9,2,16.7c0,3.6,1.8,6.8,4.6,8.6c-1.7,0-3.3-0.5-4.7-1.3v0.1c0,5,3.5,9.2,8.2,10.2c-0.9,0.2-1.8,0.3-2.7,0.3c-0.7,0-1.4,0-2-0.1c1.4,4.3,5.4,7.4,10.2,7.5c-3.7,2.9-8.3,4.6-13.3,4.6c-0.9,0-1.8,0-2.7-0.1c4.8,3.1,10.5,4.9,16.7,4.9c20,0,30.9-16.6,30.9-30.9c0-0.5,0-1.1,0-1.6C46.8,14.6,48.3,12.9,49.5,10.9z"
          fill="#ffffff"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="125"
        height="125" viewBox="0 0 50 50" style="null" class="icon icons8-X">
        <path
          d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
          fill="#ffffff"></path>
      </svg>
    </a>
  </button>
  <br>

</body>

</html>

THE END