Back to Top Button - animated

Developer
EricPorter
Size
2,680 Kb
Views
4,048
  1. Back to Top Button - animated Previews
  2. Back to Top Button - animated HTML Codes
  3. Back to Top Button - animated CSS Codes

How do I make an back to top button - animated?

What is a back to top button - animated? How do you make a back to top button - animated? This script and codes were developed by EricPorter on 09 January 2023, Monday.

Back to Top Button - animated Previews
IQ Test

Back to Top Button - animated - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Back to Top Button - animated</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #111;
}
.backtotop { margin: 30px auto; width: 40px; height: 40px; cursor: pointer; border: 1px solid #888; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8) 50%, transparent 50%); background-position: top center; background-repeat: repeat; background-size: 100% 200%; transition: all 0.2s ease-out;
}
.backtotop svg { transition: all 0.3s ease;
}
.backtotop svg polygon { fill: #888; transition: all 0.2s ease-out;
}
.backtotop:hover { background-position: bottom center;
}
.backtotop:hover svg { transform: scale(1.6);
}
.backtotop:hover svg polygon { transition: all 1s ease-out; fill: #111;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="backtotop"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 45 44"> <polygon fill="none" points="31.041,24.704 22.821,16.483 22.821,16.484 22.82,16.483 14.601,24.703 17.163,27.267 22.82,21.609 28.478,27.267 "></polygon> </svg>
</div>
</body>
</html>

Back to Top Button - animated - Script Codes CSS Codes

body { background: #111;
}
.backtotop { margin: 30px auto; width: 40px; height: 40px; cursor: pointer; border: 1px solid #888; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8) 50%, transparent 50%); background-position: top center; background-repeat: repeat; background-size: 100% 200%; transition: all 0.2s ease-out;
}
.backtotop svg { transition: all 0.3s ease;
}
.backtotop svg polygon { fill: #888; transition: all 0.2s ease-out;
}
.backtotop:hover { background-position: bottom center;
}
.backtotop:hover svg { transform: scale(1.6);
}
.backtotop:hover svg polygon { transition: all 1s ease-out; fill: #111;
}
Back to Top Button - animated - Script Codes
Back to Top Button - animated - Script Codes
Home Page Home
Developer EricPorter
Username EricPorter
Uploaded January 09, 2023
Rating 3
Size 2,680 Kb
Views 4,048
Do you need developer help for Back to Top Button - animated?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

EricPorter (EricPorter) Script Codes
Name
3d font animation - 1 class
CSS Vertical Centering Options
CSS Loading Spinner - 1 Div
Background animation - sliding divs
Image Slider - responsive, modular, autoplay
Floating Form Field Labels
Text Image Masking
Styled Contact Form - jQuery Validate
Flip Boxes
CSS Animated Bicycle
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!