Kullanıcı:
Filtreler
Neler yeni
XenGenTr
Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Giriş yap Şimdi kayıt ol
  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Nasıl yapılır ? yukarı cık aşağı in butonu

PRoFeSSioNaL

PRoFeSSioNaL

Kullanıcı
SMS onaylı
Kullanıcı
Katılım
20 Şub 2020
Mesajlar
10
yukarı çık aşağı in butonunu nasıl renk değiştirirm ve büyütürüm yardımcı olurmusunuz
 
Tarihe göre sırala Oylara göre sırala
Merhaba, PRoFeSSioNaL PRoFeSSioNaL bahsettiğin bu sanırım extra.less şablonuna ekleyip denermisin.

HTML: 
html, body { scrollbar-color: #708ab3 #395a84;}
 
Oyla 0 Downvote
Enteresan bendekini olduğu gibi alıp ekledim. cerezleri temizleyip tekrar kontrol edelim.
 
Oyla 0 Downvote
Sanırım aşağıdaki CSS kodu işini görecek.


CSS: 
.button.button--scroll, a.button.button--scroll {
    padding: 4px 6px;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.25);
    background-color: transparent;
    background-image: linear-gradient(90deg, #3b85e4 0%, #172c6d 100%);
}
.button--scroll {
    background-color: #21479d;
    color: #f4f4f4;
    width: 50px;
    height: 30px;
    position: fixed;
    right: 10px;
    bottom: 30px;
    display: none;
    text-align: center;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 9;
    font-size: 25px;
    border-radius: 50%;
    &:hover {
        color: #f4f4f4;
        text-decoration: none;
        height: 60px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
}
.button--scroll{
    background-color:transparent;
    background-image:linear-gradient(90deg, #3b85e4 0%, #172c6d 100%);
    border-radius:5px;
    box-shadow:0px 20px 40px 0px rgba(0,127,202,0.34);
    font-size:20px;
    color:#fff;
    display:none;
    width:30px;
    height:30px;
    padding:5px;
    position:fixed;
    right:20px;
    bottom:30px;
    z-index:9
}
.STReLiteYukari-Cek i{
    display:block;
    text-align:center;
    color:#fff
}
.STReLiteYukari-Cek:hover{
    color:#fff;
    text-decoration:none
}
@media (min-width:480px){
    .STReLiteYukari-Cek::before{
        background-color:transparent;
        background-image:linear-gradient(90deg, #3b85e4 0%, #172c6d 100%);
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius:5px;
        z-index:999;
        pointer-events:none;
        -webkit-animation:hareketler 2s linear infinite;
        animation:hareketler 2s linear infinite
}
}
@-webkit-keyframes hareketler{
    from{
        opacity:.4
}
    to{
        -webkit-transform:scale(2);
        transform:scale(2);
        opacity:0
}
}
@keyframes hareketler{
    from{
        opacity:.4
}
    to{
        -webkit-transform:scale(2);
        transform:scale(2);
        opacity:0
}
}
@keyframes DaireAnimation{
    0%{
        -webkit-transform:translate(0px, 0px) rotate(0deg);
        transform:translate(0px, 0px) rotate(0deg)
}
    20%{
        -webkit-transform:translate(73px, -1px) rotate(36deg);
        transform:translate(73px, -1px) rotate(36deg)
}
    40%{
        -webkit-transform:translate(141px, 72px) rotate(72deg);
        transform:translate(141px, 72px) rotate(72deg)
}
    60%{
        -webkit-transform:translate(83px, 122px) rotate(108deg);
        transform:translate(83px, 122px) rotate(108deg)
}
    80%{
        -webkit-transform:translate(-40px, 72px) rotate(144deg);
        transform:translate(-40px, 72px) rotate(144deg)
}
    100%{
        -webkit-transform:translate(0px, 0px) rotate(0deg);
        transform:translate(0px, 0px) rotate(0deg)
}
}
@-webkit-keyframes DaireAnimation{
    0%{
        -webkit-transform:translate(0px, 0px) rotate(0deg)
}
    20%{
        -webkit-transform:translate(73px, -1px) rotate(36deg)
}
    40%{
        -webkit-transform:translate(141px, 72px) rotate(72deg)
}
    60%{
        -webkit-transform:translate(83px, 122px) rotate(108deg)
}
    80%{
        -webkit-transform:translate(-40px, 72px) rotate(144deg)
}
    100%{
        -webkit-transform:translate(0px, 0px) rotate(0deg)
}
}
.button--scroll::before {
    background-color: transparent;
    background-image: linear-gradient(90deg, #3b85e4 0%, #172c6d 100%);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: 999;
    pointer-events: none;
    -webkit-animation: hareketler 2s linear infinite;
    animation: hareketler 2s linear infinite;
}
.button--scroll {
    background-color: transparent;
    background-image: linear-gradient(90deg, #3b85e4 0%, #172c6d 100%);
    border-radius: 5px;
    box-shadow: 0px 20px 40px 0px rgba(0,127,202,0.34);
    font-size: 20px;
    color: #fff;
    display: none;
    width: 30px;
    height: 30px;
    padding: 5px;
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9;
}
 
Oyla 0 Downvote
Aşağıdaki kodları extra.less şablonunun en altına ekleyiniz.

Less: 
.button.button--scroll {
    background: #f00;
    font-size: 16px;
    padding: 5px 15px;
}
a.button.button--scroll {
    background: #f00;
    font-size: 16px;
    padding: 5px 15px;
}

Yukarıdaki kod çalışmaz yani mevcut koda etki etmez ise yerine aşağıdaki kodu kullanın.

Less: 
.button.button--scroll {
    background: #f00 !important;
    font-size: 16px;
    padding: 5px 15px !important;
}
a.button.button--scroll {
    background: #f00 !important;
    font-size: 16px;
    padding: 5px 15px !important;
}
 
Oyla 0 Downvote
Cevap yazmak için giriş yap yada kayıt ol.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Giriş yap Şimdi kayıt ol