Pure CSS Down Arrow
How do I make an pure css down arrow?
Down arrow in pure css, animated. What is a pure css down arrow? How do you make a pure css down arrow? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.
Pure CSS Down Arrow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Down Arrow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pos down-arrow"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS Down Arrow - Script Codes CSS Codes
* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;}
body {margin:100px;background-color:#1d1f20;}
.pos {position:relative;margin:0 auto;}
.down-arrow {height:60px;width:60px;border:4px solid #FFF;border-radius:100%;}
.down-arrow:before,.down-arrow:after {content:'';position:absolute;top:26px;width:18px;border:2px solid #FFF;transition:all 0.3s;-webkit-transition:all 0.3s;}
.down-arrow:before {transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);left:9px;}
.down-arrow:after {transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);left:22px;}
.down-arrow:hover {cursor:pointer;border-width:0;}
.down-arrow:hover:before,.down-arrow:hover:after {top:40px;}
.down-arrow:hover:before {left:13px;}
.down-arrow:hover:after {left:26px;}
Developer | Izzy Skye |
Username | zephyr |
Uploaded | October 27, 2022 |
Rating | 3 |
Size | 1,724 Kb |
Views | 22,264 |
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!
Name | Size |
Pure CSS Read More Arrow | 1,747 Kb |
Pure CSS Social Widget | 2,262 Kb |
Aperture Science style loading | 2,782 Kb |
Pure CSS Dropdown Button | 2,192 Kb |
Small CSS Loading Animation | 2,229 Kb |
Dynamic Spinning Cubes | 3,293 Kb |
Pure CSS Wordpress Fancyboxes | 4,789 Kb |
Audio Player | 13,728 Kb |
Mobile Material Menu Style | 5,189 Kb |
Material CSS Contact Popup | 6,039 Kb |
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!
Name | Username | Size |
Atom | Bhlaird | 1,932 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Calculator | Rzencoder | 4,572 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!