- 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;
}