|
|
| 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> |
| </div> | | </div> |
|
| |
| <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>
| |
| }}
| |
