diff --git a/back-to-top button using HTML and CSS b/back-to-top button using HTML and CSS new file mode 100644 index 0000000..eddcac7 --- /dev/null +++ b/back-to-top button using HTML and CSS @@ -0,0 +1,29 @@ + +Scroll To Top + +/* CSS File */ +/* Basic css code for smooth scrolling */ +:root { scroll-behavior: smooth; } +/* For floating back to top button */ +.stt { + position: fixed; + right: 1rem; + bottom: 1rem; + width: 3rem; + height: 3rem; + border-radius: 50%; + background: rgb(128, 128, 255) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat; + box-shadow: 0 0.25rem 0.5rem 0 gray; + opacity: 0.7; +} +.stt:hover { + opacity: 0.8; +} +.stt:focus { + opacity: 0.9; +} +.stt:active { + opacity: 1; +} +/* After adding this link you have to update the HTML link by the following code + */