Home
Homayoun
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple

Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple

Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

This tailwind example is contributed by Homayoun, on 05-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Transitions,Social media links,

Button Animation Social media buttons

Author Homayoun

216

Fork Fullscreen

<section class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
  <div class="space-y-4 w-full max-w-sm">
    
    <button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-white dark:bg-gray-800 border-2 border-red-100 dark:border-red-900/30 text-gray-800 dark:text-gray-100 hover:bg-red-50 dark:hover:bg-gray-700 group"
      style="animation-delay: 0.1s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-0.5 0 48 48"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-401 -860)">
            <g transform="translate(401 860)">
              <path
                d="M9.827 24c0-1.524.253-2.986.705-4.356L2.623 13.604A23.864 23.864 0 00.214 24c0 3.737.868 7.261 2.407 10.388l7.904-6.051C10.077 26.973 9.827 25.517 9.827 24"
                fill="#FBBC05"
              />
              <path
                d="M23.714 10.133c3.311 0 6.302 1.174 8.652 3.094L39.202 6.4C35.036 2.773 29.695.533 23.714.533c-9.287 0-17.268 5.311-21.09 13.071l7.909 6.04c1.822-5.532 7.017-9.511 13.181-9.511"
                fill="#EB4335"
              />
              <path
                d="M23.714 37.867c-6.165 0-11.359-3.979-13.182-9.51l-7.908 6.037c3.822 7.761 11.803 13.072 21.09 13.072 5.732 0 11.205-2.036 15.311-5.849l-7.507-5.804c-2.118 1.335-4.786 2.054-7.804 2.054"
                fill="#34A853"
              />
              <path
                d="M46.145 24c0-1.387-.213-2.88-.534-4.267H23.714V28.8h12.604c-.63 3.091-2.346 5.468-4.8 7.014l7.507 5.804C43.34 37.614 46.145 31.649 46.145 24"
                fill="#4285F4"
              />
            </g>
          </g>
        </g>
      </svg>
      <span>Continue with Google</span>
    </button>

<button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-blue-600 hover:bg-blue-700 border-2 border-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 group"
      style="animation-delay: 0.2s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 -2 44 44"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-702 -265)" fill="#FFF">
            <path
              d="M746 305h-9.725v-14.062c0-3.68-1.52-6.193-4.866-6.193-2.558 0-3.981 1.696-4.643 3.33-.248.586-.209 1.403-.209 2.22V305h-9.634s.124-24.909 0-27.173h9.634v4.265c.575-1.865 3.654-4.526 8.567-4.526 6.105 0 10.876 3.909 10.876 12.325V305zM707.179 274.428h-.062c-3.105 0-5.117-2.077-5.117-4.71 0-2.684 2.072-4.718 5.238-4.718 3.164 0 5.11 2.029 5.172 4.711 0 2.633-2.008 4.717-5.231 4.717zM703.11 277.827h8.576V305h-8.576v-27.173z"
            />
          </g>
        </g>
      </svg>
      <span>Continue with LinkedIn</span>
    </button>

<button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-black hover:bg-gray-900 border-2 border-gray-800 text-white dark:bg-gray-900 dark:hover:bg-black dark:border-gray-700 group"
      style="animation-delay: 0.3s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="white"
      >
                <path d="M18.244 2H21.5l-7.32 8.366L22 22h-5.99l-4.676-6.07L6.1 22H2.84l7.814-8.937L2 2h6.09l4.219 5.574L18.244 2zM17.18 20h1.65L8.03 4h-1.8l10.95 16z"/>
      </svg>
            <span>Continue with X</span>
    </button>

<button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-blue-800 hover:bg-blue-900 border-2 border-blue-900 text-white dark:bg-blue-900 dark:hover:bg-blue-950 group"
      style="animation-delay: 0.4s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 48 48"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-200 -160)" fill="#FFF">
            <path
              d="M225.638 208h-22.99c-1.463 0-2.649-1.186-2.649-2.649v-42.702c0-1.463 1.186-2.649 2.65-2.649h42.7c1.464 0 2.65 1.186 2.65 2.649v42.702c0 1.463-1.186 2.649-2.65 2.649h-12.231v-18.588h6.24l.934-7.244h-7.174v-4.625c0-2.098.58-3.527 3.508-3.527l3.836-.002v-6.48c-.663-.088-2.94-.285-5.59-.285-5.53 0-9.317 3.376-9.317 9.575v5.344h-6.255v7.244h6.255V208z"
            />
          </g>
        </g>
      </svg>
      <span>Continue with Facebook</span>
    </button>

<button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-gray-900 hover:bg-black border-2 border-black text-white dark:bg-gray-800 dark:hover:bg-black dark:border-gray-700 group"
      style="animation-delay: 0.5s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 73 73"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(2 2)" fill-rule="nonzero">
            <path
              d="M58.307 21.428c-2.411-4.131-5.682-7.401-9.812-9.812C44.364 9.205 39.854 8 34.961 8c-4.891 0-9.403 1.205-13.533 3.616-4.131 2.41-7.401 5.681-9.812 9.812C9.205 25.559 8 30.07 8 34.961c0 5.875 1.714 11.158 5.143 15.85 3.428 4.693 7.858 7.94 13.287 9.742.631.117 1.099.035 1.403-.245.304-.281.456-.632.456-1.053 0-.07-.006-.702-.018-1.896-.012-1.194-.018-2.235-.018-3.124l-.808.14c-.515.094-1.164.134-1.948.123-.784-.011-1.598-.093-2.44-.246-.843-.151-1.627-.502-2.353-1.052-.725-.55-1.24-1.27-1.544-2.159l-.351-.808c-.234-.538-.602-1.135-1.106-1.79-.503-.656-1.012-1.1-1.527-1.334l-.246-.176c-.164-.117-.316-.258-.456-.422-.141-.163-.246-.327-.317-.491-.07-.164-.012-.299.176-.404.187-.106.526-.157 1.018-.157l.702.105c.468.094 1.047.374 1.738.842.69.468 1.258 1.077 1.703 1.826.538.96 1.187 1.691 1.948 2.194.76.503 1.527.755 2.299.755.773 0 1.44-.059 2.002-.175.561-.117 1.088-.293 1.58-.527.21-1.569.784-2.774 1.72-3.616-1.334-.14-2.533-.351-3.598-.632-1.065-.281-2.165-.737-3.3-1.37-1.135-.631-2.077-1.416-2.826-2.352-.749-.936-1.363-2.165-1.843-3.687-.48-1.521-.72-3.276-.72-5.265 0-2.833.925-5.243 2.774-7.233-.89-2.129-.808-4.516.246-7.16.677-.212 1.684-.05 3.018.476 1.334.527 2.311.978 2.931 1.352.621.374 1.118.691 1.492.948 2.177-.608 4.424-.912 6.741-.912 2.317 0 4.564.304 6.741.912l1.335-.842c.913-.562 1.99-1.077 3.23-1.545 1.24-.468 2.189-.597 2.844-.386 1.053 2.645 1.147 5.032.281 7.162 1.85 1.99 2.774 4.401 2.774 7.233 0 1.99-.24 3.75-.72 5.284-.48 1.533-1.095 2.762-1.843 3.686-.749.925-1.697 1.703-2.844 2.335-1.147.632-2.247 1.088-3.3 1.369-1.053.281-2.264.492-3.633.633 1.217 1.053 1.826 2.715 1.826 4.985v7.392c0 .421.147.773.44 1.053.293.281.755.363 1.387.246 5.43-1.802 9.859-5.049 13.288-9.742 3.428-4.693 5.142-9.976 5.142-15.85 0-4.892-1.206-9.403-3.616-13.534z"
              fill="#FFF"
            />
          </g>
        </g>
      </svg>
      <span>Continue with Github</span>
    </button>

<button
      class="opacity-0 animate-slideIn w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-800 hover:to-gray-900 border-2 border-gray-900 text-white dark:from-gray-600 dark:to-gray-700 dark:hover:from-gray-700 dark:hover:to-gray-800 group"
      style="animation-delay: 0.6s"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-1.5 0 20 20"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-102 -7439)" fill="#FFF">
            <g transform="translate(56 160)">
              <path
                d="M57.571 7282.193c.729-.845 1.22-2.022 1.086-3.193-1.05.04-2.322.671-3.075 1.515-.676.749-1.267 1.946-1.108 3.094 1.172.087 2.368-.57 3.097-1.416m2.628 7.432c.029 3.027 2.77 4.034 2.801 4.047-.023.071-.438 1.435-1.444 2.845-.87 1.218-1.773 2.431-3.196 2.457-1.397.025-1.847-.818-3.446-.818-1.598 0-2.097.768-3.42.819-1.373.049-2.42-1.318-3.297-2.532-1.793-2.483-3.163-7.017-1.323-10.077.914-1.519 2.547-2.482 4.321-2.506 1.348-.025 2.621.889 3.445.889.824 0 2.371-.984 4.003-.826.68.027 2.592.262 3.819 1.983-.1.059-2.28 1.275-2.256 3.803"
              />
            </g>
          </g>
        </g>
      </svg>
      <span>Continue with Apple</span>
    </button>
  </div>
</section>

Related Examples