Merge pull request #2580 from thevijayshankersharma/back-to-top2

Redesigned the 'Back to Top' button

assets/css/style.css

@@ -3192,6 +3192,57 @@ footer {
  transition: background-color 0.3s;
 }
 
+.Btn {
+ width: 45px;
+ height: 45px;
+ background-color:#222325;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ cursor: pointer;
+ position: relative;
+ border: none;
+}
+
+.arrow path {
+ fill: #d78c8d;
+}
+
+.text {
+ font-size: 0.7em;
+ width: 100px;
+ position: absolute;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ bottom: -18px;
+ opacity: 0;
+ transition-duration: .7s;
+}
+
+.Btn:hover .text {
+ opacity: 1;
+ transition-duration: .7s;
+}
+
+.Btn:hover .arrow {
+ animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes slide-in-bottom {
+ 0% {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
 #back-to-top {
  width: 51px;
  height: 51px;

index.html

@@ -2750,14 +2750,10 @@ <h2>Quick Links</h2>
  </div>
 
  <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
- <div class="circle1">
- <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
- class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
- <path
- d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
- </svg>
-
- </div>
+ <button class="Btn">
+ <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
+ <p class="text">Back to Top</p>
+ </button>
  </div>
 
  </div>