Buton "Go to top"

Salutare,aş vrea un buton "Go to up" versiunea phpBB2 ca la cea de PunBB/IPB .
Imagine : https://i.imgur.com/u1xa3qk.png
Sărbători fericite!

Bună,

Navigați în PA > Module > Gestiunea codurilor JavaScript > Creati un nou cod Javascript, Amplasare : Toate paginile:

Cod:

$(function(){
    $("#page-footer").before("<div class=\"circle backtop\"><div class=\"triangle\"></div></div>");
    $('.backtop').click(function() {
        $('body, html').animate({scrollTop:0}, 700);
    });
});

Și apoi adăugați în foaia de stil CSS:

Cod:

.circle {
    height: 30px;
    width: 30px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}

.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 7px;
    margin: 0px auto;
    border-bottom: 12px solid #555;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

Salutare,

Toate sunt în regulă,doar că vreau acel "cerc" mai gros,să se vadă cât de cât .
Iar triunghiul din cerc să fie mai "hd" ,cum s-ar spune...să fie în linii drepte,fără întrerupere.
Iar tot butonul,să-l mai măriţi cu 2px.
Mulţumesc mult!

Uhm...nu sunt sigur că am înțeles totul. Am mărit puțin butonul, mai trebuia să fac ceva?

Cod:

.circle {
    height: 40px;
    width: 40px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}
.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 11px;
    margin: 0px auto;
    border-bottom: 14px solid #555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

Mărimea acum e perfectă .
Mai vreau dor să se vadă mai mult acel cerc . (de la buton)
Să fie mai gros. (dar să rămână transparent)
Mulţumesc!

Cod:

.circle {
    height: 50px;
    width: 50px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}
.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 16px;
    margin: 0px auto;
    border-bottom: 14px solid #555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

Dacă doriți să vă mai jucați cu mărimea cercului, modificați height: 50px; și width: 50px;, și apoi top: 16px; pentru a ajusta poziția acelui triunghi, pe înălțime.

Mărimea e potrivită,tot .
Dar nu-mi apare acel cerc :

Link imagine : https://i.imgur.com/9bcVUIM.jpg

Probabil din cauză că înainte de cod aveți o bară

Cod:

------------------------------------------------------------

Dacă doriți să adăugați, separați, comentați ceva într-un cod CSS, adăugați între /* și */

Cod:

/* conținut, comentariu orice */

Cu asta am rezolvat,dar mai vreau ca atunci când pui cursorul de la mouse să se "aprindă"
EDIT :
Uite aşa :
Şi când pui cursorul de la mouse :

Adaugă asta:

Cod:

.circle:hover {
  background-color: #222;
}
.circle:hover .triangle {
  border-bottom-color: #999;
}

Puteți modifica culoriel cum doriți, prima e pentru cerc, a doua pentru triunghi la hover.

Rezolvat,mulţumesc de tot!

Cu plăcere.