Template:Back to top: Difference between revisions

From Ragnafied Wiki
No edit summary
No edit summary
Line 1: Line 1:
{{#tag:html|
<div class="back-to-top-container">
<div class="back-to-top-container">
<a href="#">↑ Top</a>
<a href="#">↑ Top</a>
Line 10: Line 11:
     z-index: 9999;
     z-index: 9999;
}
}
.back-to-top-container a {
.back-to-top-container a {
     background: linear-gradient(135deg, #FF6A00, #D93800);
     background: linear-gradient(135deg, #FF6A00, #D93800);
Line 27: Line 27:
     transition: all 0.3s ease;
     transition: all 0.3s ease;
}
}
.back-to-top-container a:hover {
.back-to-top-container a:hover {
     background: linear-gradient(135deg, #FF7A20, #F4B400);
     background: linear-gradient(135deg, #FF7A20, #F4B400);
Line 35: Line 34:
     text-decoration: none;
     text-decoration: none;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
     .back-to-top-container {
     .back-to-top-container {
Line 48: Line 46:
}
}
</style>
</style>
}}

Revision as of 22:09, 20 February 2026

<html>

<a href="#">↑ Top</a>

<style> .back-to-top-container {

   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 9999;

} .back-to-top-container a {

   background: linear-gradient(135deg, #FF6A00, #D93800);
   color: white;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 14px;
   text-decoration: none;
   box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   border: 2px solid white;
   transition: all 0.3s ease;

} .back-to-top-container a:hover {

   background: linear-gradient(135deg, #FF7A20, #F4B400);
   transform: translateY(-5px);
   box-shadow: 0 6px 15px rgba(0,0,0,0.4);
   color: white;
   text-decoration: none;

} @media (max-width: 768px) {

   .back-to-top-container {
       bottom: 20px;
       right: 20px;
   }
   .back-to-top-container a {
       width: 45px;
       height: 45px;
       font-size: 12px;
   }

} </style> </html>