Tessisamess

Customizable Back-to-Top Button

Information

Hey guys! Like my controlstrip add-ons, this layout addition will work in most S1 Generator/S2 Complete layout, and gives you full control of styling, colors, and sizes, so no matter what your aesthetic, you'll be able to adapt this to match your layout in no time at all! Enjoy! ♥

S1 Generator: Add the CSS to your layout's existing CSS, then copy and past the HTML under your custom custom coding (sidebars, topbars, whatever it is your layout has!) This should ideally be done in four spots in your Generator layout, if you have custom coding viewable on all four of your page types.

S2 Complete Style: Add the CSS to your layout's existing CSS, then copy and past the HTML into your custom text box. If you experience odd spacing issues, run the HTML all onto a single line, as custom text boxes in S2 do not allow for raw HTML and will render manual line breaks. If you are not using a layout that has a sidebar enabled, you can use the sticky note, but be aware that the button will not show up on about half of your pageviews.

Positioning: Usually you'll only want one vertical and one horizontal position set unless turning the button or panel into a full height or full width navigation strip type deal. I've set this up so that you can easily change the positioning on the fly; all you need to do is set the positions you aren't using to auto.

Single Button: CSS

/* BACK-TO-TOP BUTTON ADD-ON - TESSISAMESS - 2019 */ :root .top{ --font: 'Material Icons'; --radius: 100%; /* 100% round - 0% square */ /* COLORS */ --bg: #eee; --text: #000; --hover: #68B9B9; --border: rgba(0,0,0,0.1); --shadow: rgba(0,0,0,0.1); /* POSITIONING */ --left: 10px; --right: auto; --top: auto; --bottom: 10px; --p-hover: 0 0 10px 0; /* SIZE */ --width: 40px; --height: 40px; --text-size: 40px; } @font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} .top{position:fixed;z-index:10;left:var(--left);bottom:var(--bottom);right:var(--right);top:var(--top);width:var(--width);height:var(--height);background:var(--bg);border:1px solid var(--border);box-shadow:1px 1px 2px 0 var(--shadow);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font);font-size:var(--text-size);color:var(--text);text-decoration:none;font-weight:normal;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} .top:hover{margin:var(--p-hover);color:var(--hover);}

Single Button: HTML

<a class="top" href="#">keyboard_arrow_up</a>

Multi-Button Panel: CSS

/* BACK-TO-TOP BUTTON ADD-ON - TESSISAMESS - 2019 */ :root .panel{ --font: 'Material Icons'; --radius: 100%; /* 100% round - 0% square */ /* COLORS */ --bg: #eee; --text: #000; --hover: #68B9B9; --border: rgba(0,0,0,0.1); --shadow: rgba(0,0,0,0.1); /* POSITIONING */ --left: 10px; --right: auto; --top: auto; --bottom: 10px; --margin: 10px 0 0 0; /* SIZE */ --width: 35px; --height: 35px; --text-size: 25px; } @font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} .panel{position:fixed;z-index:10;left:var(--left);bottom:var(--bottom);right:var(--right);top:var(--top);width:var(--width);text-align:center;font-family:var(--font);font-size:var(--text-size);font-weight:normal;} .panel a{height:var(--height);margin:var(--margin);background:var(--bg);border:1px solid var(--border);box-shadow:1px 1px 2px 0 var(--shadow);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} .panel a:hover{color:var(--hover);}

Multi-Button Panel: HTML

Default links are back-to-top and refresh. Add as many links as you need; go to the Material Icons search to find icons for your buttons, then use the name of that icon for your link text for an instant icon!

<span class="panel">
	<a href="">refresh</a> <!-- leave blank to refresh the page -->
	<a href="#">keyboard_arrow_up</a> <!-- leave # to jump to top -->
</span>

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!