Home
Buton
Buton Tasarım

X-Twitter ve Threads Butonu Yapımı

Anonim
X-Twitter Sosyal Medya Butonu
Biliyoruz ki Twitter'ın logosu artık 'X' oldu ve buna göre sitenize ekleyebileceğiniz sosyal medya butonları tasarımı yaptık. Umarım yeni 'X' butonunu beğenirsiniz. Hemen yapımına geçelim.

Kod:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
button-container (
display: flex;
gap: 16px; /* Adjust the gap between buttons */
/* Styles for the first button */
#button1 {
background-color: black;
text-decoration: none: /* Remove default underline */
/* Styles for the second button */
#button2 <
background-color: #795CE4:
text-decoration: none; /* Remove default underline */
}
/* Common styles for both buttons */
button, a f
border-radius: 8px;
padding: 8px 12px;
border: none;
color: white;
display: flex;
align-items: center;
text-decoration: none; /* Remove default underline */
button svg, a svg (
margin-right: 8px;
button span, a span {
border-left: 1px solid white;
padding-left: 8px;
</style>
</head>
<body>
<div class="button-container">
<a href="https://twitter.com/yazilimtarihi" id="button1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
spath d="M12.6.75h2.4541-5.36 6.142L16 15,25h-4.9371-3.867-5.07-4.425 5.07H.31615.733-6.57L0.75h5.06313.495 4.633112.601.752m-.86 13,028h1.36L4.323 2.145H2.86518.875 11.6332"/>
</svg>
<span>Twitter</span>
</a>

Kodun Çıktısı:  





Threads Sosyal Medya Butonu
Meta şirketinin yeni uygulaması olan Threads uygulamasının sosyal butonunu sitenize eklemek istediğinizi duyar gibiyiz. Doğru yerdesiniz; sizin için tasarladık. Arka plan rengini kendi isteğinize göre değiştirebilirsiniz.

Kod:

  <a href="https://www.threads.net/?hl=tr" id="button2">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-threads" viewbox="0 0 16 16">
        <path d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948.591.621.928 1.509 1.005 2.644.328.138.63.299.905.484 1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.217 6.217 0 0 0-1.528-.161"/>
      </path></svg>
     <span>Threads</span> </a>

Kodun Çıktısı:

Threads & X-Twitter Butonları Yan Yana
İki sosyal butonu yan yana getirmeniz için, iki butonun toplu kodu aşağıdaki gibidir. İkonlar SVG formatındadır ve gönül rahatlığıyla sitenize ekleyebilirsiniz.

Kod:
  <!doctype html>
  <style>
    .button-container {
      display: flex;
      gap: 16px; /* Adjust the gap between buttons */
    }
    /* Styles for the first button */
    #button1 {
      background-color: black;
      text-decoration: none; /* Remove default underline */
    }
    /* Styles for the second button */
    #button2 {
      background-color: #795CE4;
      text-decoration: none; /* Remove default underline */
    }
    /* Common styles for both buttons */
    button, a {
      border-radius: 8px;
      padding: 8px 12px;
      border: none;
      color: white;
      display: flex;
      align-items: center;
      text-decoration: none; /* Remove default underline */
    }
    button svg, a svg {
      margin-right: 8px;
    }
    button span, a span {
      border-left: 1px solid white;
      padding-left: 8px;
    }
  </style>
  <div class="button-container">
    <a href="https://twitter.com/yazilimtarihi" id="button1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewbox="0 0 16 16">
        <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
      </path></svg>
      <span>Twitter</span>
    </a>
    <a href="https://www.threads.net/?hl=tr" id="button2">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-threads" viewbox="0 0 16 16">
        <path d="M6.321 6.016c-.27-.18-1.166-.802-1.166-.802.756-1.081 1.753-1.502 3.132-1.502.975 0 1.803.327 2.394.948.591.621.928 1.509 1.005 2.644.328.138.63.299.905.484 1.109.745 1.719 1.86 1.719 3.137 0 2.716-2.226 5.075-6.256 5.075C4.594 16 1 13.987 1 7.994 1 2.034 4.482 0 8.044 0 9.69 0 13.55.243 15 5.036l-1.36.353C12.516 1.974 10.163 1.43 8.006 1.43c-3.565 0-5.582 2.171-5.582 6.79 0 4.143 2.254 6.343 5.63 6.343 2.777 0 4.847-1.443 4.847-3.556 0-1.438-1.208-2.127-1.27-2.127-.236 1.234-.868 3.31-3.644 3.31-1.618 0-3.013-1.118-3.013-2.582 0-2.09 1.984-2.847 3.55-2.847.586 0 1.294.04 1.663.114 0-.637-.54-1.728-1.9-1.728-1.25 0-1.566.405-1.967.868ZM8.716 8.19c-2.04 0-2.304.87-2.304 1.416 0 .878 1.043 1.168 1.6 1.168 1.02 0 2.067-.282 2.232-2.423a6.217 6.217 0 0 0-1.528-.161"/>
      </path></svg>
      <span>Threads</span>
    </a>
  </div>
</!doctype>

Kodun Çıktısı:


X & Threads İkonları
Sitenizde çok şık görünecek button kodlarımız bugünlük bu kadardı bu tür içeriklerin devamının gelmesini istiyorsanız Yazılım Tarihi'ni takipte kalın

Tasarlayan: Yazılım Tarihi
Kütüphane: Bostraap




Post a Comment