KategorilerButon KodlarıKodlar

Sosyal Medya İkonları

  • Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
  • İnsagram gönderisine ulaşmak için buraya tıklayın.
  • Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
  • Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

Bu projede ikonlar için font awesome ikon kütüphanesi kullanılmıştır. Aşağıda vericeğim kodu html projenizin head kısmına yapıştırırsanız sorunsuz çalışıcaktır.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML KODLARI


    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-facebook-f"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-instagram"></i></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-twitter"></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-linkedin-in"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-dribbble"></i>
        </button>
    </li>

CSS KODLARI

  li {
            list-style: none;
            display: inline-block;
        }


        .btn {
            font-weight: 400;
            border: 2px solid transparent;
            border-radius: .4rem;
            cursor: pointer;
            transition: all .8s;
        }

        .sMedya-btn {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            font-size: 2rem;
            line-height: 2rem;
        }

        .btn-renk {
            color: #212529;
            border-color: #212529;
            background-color: transparent;
        }

        .btn-renk:hover {
            color: #fff;
            background-color: #212529;
        }

KategorilerButon KodlarıGenelKodlar

Animasyonlu Buton

  • Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
  • İnsagram gönderisine ulaşmak için buraya tıklayın.
  • Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
  • Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

HTML KODLARI


  <button class="buton">Acil Durum</button>

CSS KODLARI

   .buton {
      padding: 15px 25px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #e23222;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }



    .buton:hover {
      background-color: #e22b2a
    }

    .buton:active {
      background-color: red;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }