0
Kayıt Ol

Wordpress: Bu Sitedeki Gibi Yanıp Sönen Arama Butonu?

4

●

246

  • 21-01-2023, 09:17:18
    #1
    Maharaja
    Maharaja
    Merhaba. https://egehastane.ege.edu.tr/ Bu siteye girdiğinizde sağ üstte yanıp sönen arama butonu var. Aynı onun gibi yanıp sönen, sadece masaüstünde görünecek arama butonu için bir eklenti var mı?
  • 21-01-2023, 09:40:38
    #2
    ABC
    ABC 
    .numaraTel:before {
position: absolute;
content: " ";
z-index: -1;
top: -15px;
left: -15px;
background-color: #8e1c34;
width: 80px;
height: 80px;
border-radius: 100%;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
opacity: 0.6;
webkit-animation: pulse 1s ease-out;
animation: pulse 1.8s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
    -- Sadece Masaüstü bilgisayarda kullanmak istiyorsanız.

    @media (max-width:800px) { CSS BURAYA GELECEK    } }
    800px altı cihazlarda görünmemesini istiyorsanız yukarıdaki css kodunu alanına yukarıdaki css kodunuzu ekleyebilirsiniz.

    Not: Denemedim tabletten giriyorum.
  • 21-01-2023, 09:48:21
    #3
    Maharaja
    Maharaja
    ABC adlı üyeden alıntı: mesajı görüntüle 
    .numaraTel:before {
position: absolute;
content: " ";
z-index: -1;
top: -15px;
left: -15px;
background-color: #8e1c34;
width: 80px;
height: 80px;
border-radius: 100%;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
opacity: 0.6;
webkit-animation: pulse 1s ease-out;
animation: pulse 1.8s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
    -- Sadece Masaüstü bilgisayarda kullanmak istiyorsanız.

    @media (max-width:800px) { CSS BURAYA GELECEK    } }
    800px altı cihazlarda görünmemesini istiyorsanız yukarıdaki css kodunu alanına yukarıdaki css kodunuzu ekleyebilirsiniz.

    Not: Denemedim tabletten giriyorum.
    Öncelikle teşekkür ederim. Kodları CSS'e ekledim fakat maalesef olmadı. Çıkmadı
  • 21-01-2023, 09:51:46
    #4
    ABC
    ABC
    Maharaja adlı üyeden alıntı: mesajı görüntüle
    Öncelikle teşekkür ederim. Kodları CSS'e ekledim fakat maalesef olmadı. Çıkmadı
    CSS Yapısını kendi websitenize göre uyarlamalısınız direk copy paste ile çalışmaz.
  • 21-01-2023, 11:48:23
    #5
    Yusuf
    Yusuf
    ABC adlı üyeden alıntı: mesajı görüntüle 
    .numaraTel:before {
position: absolute;
content: " ";
z-index: -1;
top: -15px;
left: -15px;
background-color: #8e1c34;
width: 80px;
height: 80px;
border-radius: 100%;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
opacity: 0.6;
webkit-animation: pulse 1s ease-out;
animation: pulse 1.8s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
    -- Sadece Masaüstü bilgisayarda kullanmak istiyorsanız.

    @media (max-width:800px) { CSS BURAYA GELECEK    } }
    800px altı cihazlarda görünmemesini istiyorsanız yukarıdaki css kodunu alanına yukarıdaki css kodunuzu ekleyebilirsiniz.

    Not: Denemedim tabletten giriyorum.
    Küçük bir ekleme de ben yapayım 

    <div class="numaraText hidden-xs hidden-sm">
                            <div class="numaraTel">
                                <i class="fa fa-phone"></i>
                            </div>
                            <div class="telText" style=""><span>0 232 343 4 343</span></div>
                       </div>
    Bu HTML kodunu sitenize eklemeniz gerekmektedir. HTML'i ekledikten sonra @ABC;'nin vermiş olduğu CSS kodunu düzenleme yapmaya gerek kalmadan kullanabilirsiniz.

    .numaraText {
    width: 150px;
    height: 35px;
    background: #730e24;
    position: fixed;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    /* border-radius: 40px; */
    z-index: 99999999;
    right: 0px;
    font-size: 1.3rem;
    top: 65px;
    display: inline-block;
}

.numaraTel {
    width: 47px;
    height: 47px;
    top: 60px;
    color: #fff;
    bottom: 60px;
    background: #8e1c34;
    position: fixed;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    z-index: 999999;
    display: inline-block;
}

.numaraTel:before {
    position: absolute;
    content: " ";
    z-index: -1;
    top: -15px;
    left: -15px;
    background-color: #8e1c34;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 0.6;
    -webkit-animation: pulse 1s ease-out;
    animation: pulse 1.8s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.numaraTel .fa {
    font-size: 25px;
    margin: 9px;
}
    İyi çalışmalar.