Jump to content
×
×
  • Create New...

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Hareketli Sosyal Medya Butonu Yapımı Örnekleri Ve Kodları | HTML + CSS

Rate this topic


programYaz

Recommended Posts

Hareketli Sosyal Medya Butonu Yapımı Örnekleri Ve Kodları | HTML + CSS
  • Members

Bu yazımızda HTML ve CSS kullanarak, web sitelerinizde çok şık duracak hareketli sosyal medya butonu yapacağız. Hemen ön izlememizi görelim.

 

Adsiz-tasarim-1.gif

 

Önemli : İkonların kullanılabilmesi için FontAwasome css dosyasını sitenize entegre etmeniz gerekmektedir. Buraya tıklayarak, FontAwasome.com sitesinden gerekli bilgi ve dosyayı alabilirsiniz.

Şimdide kodumuzu görelim :

 

HTML :

<div class="main">
    <div class="box">
        <input type="checkbox" name="" id="checkbox" />
        <div class="menus">
            <a href="#">
                <div class="menuItems">
                    <i class="fab fa-whatsapp"></i>
               </div>
            </a>
            <a href="#">
                <div class="menuItems">
                    <i class="fab fa-instagram"></i>
                </div>
            </a>
            <a href="#">
                <div class="menuItems">
                    <i class="fab fa-facebook-f"></i>
                </div>
           </a>
           <a href="#">
                <div class="menuItems">
                    <i class="fab fa-twitter"></i>
                </div>
           </a>
        </div>
    </div>
</div>

 

CSS:

 

*{
    margin: 0;
    padding: 0;
}
body{
    background: linear-gradient(to right,#131313 50%, #1d1d1d 50%);
}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    display: flex;
}
#checkbox{
    width: 65px;
    height: 65px;
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
    background: white;
    position: relative;
}
#checkbox:hover{
    background: rgba(255, 255, 255, 0.747);
}
#checkbox::before{
    content: '\f0c1';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: 'font awesome 5 free';
    font-weight: 700;
    font-size: 1.9rem;
    color: rgb(41, 41,41);
    transition: all 2s;
}

#checkbox:checked::before{
    content: "\f00d";
}
#checkbox:checked ~ .menus{
    width: 260px;
}
.menus{
    width: 0;
    display: flex;
    overflow: hidden;
    transition: all 0.5s;
}
.menus .menuItems{
    width: 65px;
    height: 65px;
    background: white;
    position: relative;
    border-left: 1px solid rgb(165, 165, 165);
}
.menus .menuItems:hover{
    background: rgba(255, 255, 255, 0.747);
}
.menus .menuItems i{
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.fa-whatsapp{
    color: #25d366;
}
.fa-instagram{
    color: #c32aa3;
}
.fa-facebook-f{
    color: #1877f2;
}
.fa-twitter{
    color: #1da1f2;
}
.menus a{
    color: rgb(34, 34, 34);
}

 

Ada LoveLace

Link to comment
https://weblep.com/topic/192-hareketli-sosyal-medya-butonu-yap%C4%B1m%C4%B1-%C3%B6rnekleri-ve-kodlar%C4%B1-html-css/
Share on other sites


Konu Altı Reklam 1
Konu Altı Reklam 2
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...