HTML/CSS “Back to the Top” Button
The HTML part only contains the following:
This is put right before the tag. Remember to retype the quotations. The bolded text is editable (as long as in your CSS you change according to your tag, for example, if you changed the id to “top” then in the CSS, it should be #top, or if you used class instead of id, than it should be .backtotop in CSS).
After inserting that code into the HTML, you can add to the CSS to stylize the division. For example:
font: 12px lucida console, trebuchet ms, sans-serif;
This directs how the position, size and background of the button.
position:fixed; must be this value if your want to keep it at the bottom of the page
right:20px; bottom:0px; you can change values or use “left” or “top” to adjust the position of the button.
width: 35px;height: 40px; this specifies the size of the button
text-align:center; this makes the text centered in the button
background:#333333; feel free to change colors or even add a image/pattern to this.
This dictates how the button will look when you hover over it.
This dictates how the text in the button will look
This dictates how the text in the button will look when you hover over it
Feel free to change/add values or properties according to your taste.