Pure CSS Arrow Collection
How do I make an pure css arrow collection?
Collection of all my pure css arrows. What is a pure css arrow collection? How do you make a pure css arrow collection? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.
Pure CSS Arrow Collection Previews
Pure CSS Arrow Collection - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Arrow Collection</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>The Pure CSS Arrow Collection</h2> <div id="arrow-1" class="arrow-collection"> <input type="checkbox" id="arrow-mask-check" /> <label for="arrow-mask-check" class="arrow-mask-label"> <div class="arrow"> <div class="arrow-mask"></div> </div> </label> </div> <div id="arrow-2" class="arrow-collection"> <div class="spin-dropdown medium"> <input type="checkbox" id="spinner-form-medium" /> <label for="spinner-form-medium" class="spinner-spin"></label> <div class="item-to-be-affected"></div> </div> </div> <div id="arrow-3" class="arrow-collection"> <div class="fullWidth"> <div class="dropdown"> <input type="checkbox" id="spinner-form-small" /> <label for="spinner-form-small" class="spinner-spin"></label> <form action="#" id="dropdown-form"> <ol> <li> <a href="#">Choice 1</a> </li> <li> <a href="#">Choice 2</a> </li> <li> <a href="#">Choice 3</a> </li> <li> <a href="#">Choice 4</a> </li> <li> <a href="#">Choice 5</a> </li> <li> <a href="#">Choice 6</a> </li> </ol> </form> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS Arrow Collection - Script Codes CSS Codes
* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;}
body {margin:0;background-color:#1d1f20;}
.container {position:relative;margin:0 auto;width:80%;}
.container h2 {text-align:center;color:#FFF;}
.arrow-collection {position:relative;float:left;margin:10%;}
/* ARROW 1 */
#arrow-1 #arrow-mask-check {display:none;}
#arrow-1 .arrow {position:relative;float:left;border:4px solid #FFF;border-radius:100%;width:40px;height:40px;}
#arrow-1 .arrow .arrow-mask {position:relative;float:left;top:-33px;left:-33px;border:21px solid transparent;}
#arrow-1 .arrow .arrow-mask:before {content:'';position:relative;float:left;top:16px;left:28px;width:4px;height:16px;background-color:#FFF;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:all 0.3s;-webkit-transition:all 0.3s;}
#arrow-1 .arrow .arrow-mask:after {content:'';position:relative;float:left;top:9px;left:28px;width:4px;height:16px;background-color:#FFF;transform:rotate(45deg);-webkit-transform:rotate(45deg);transition:all 0.3s;-webkit-transition:all 0.3s;}
#arrow-1 .arrow:hover {cursor:pointer;border-color:#E0346A;}
#arrow-1 .arrow:hover .arrow-mask:before {background-color:#E0346A;}
#arrow-1 .arrow:hover .arrow-mask:after {background-color:#E0346A;}
#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow {border-color:transparent;border-width:0;}
#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {left:-10px;top:-29px;}
#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask:before {background-color:#E0346A;transform:rotate(405deg);-webkit-transform:rotate(405deg);}
#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask:after {background-color:#E0346A;transform:rotate(-405deg);-webkit-transform:rotate(-405deg);}
/* ARROW 2 */
#arrow-2 .spin-dropdown input[type=checkbox] {display:none;}
#arrow-2 .spin-dropdown .spinner-spin {cursor:pointer;position:absolute;height:44px;width:44px;border:22px solid #000;border-radius:100%;background:none;}
#arrow-2 .spin-dropdown .spinner-spin:before {content:'';position:absolute;margin-left:-13px;transform:rotate(225deg);-webkit-transform:rotate(225deg);background-color:#FFF;height:4px;width:18px;transition:transform 0.3s, background-color 0.3s;-webkit-transition:transform 0.3s, background-color 0.3s;}
#arrow-2 .spin-dropdown .spinner-spin:after {content:'';position:absolute;margin-left:-3px;transform:rotate(-225deg);-webkit-transform:rotate(-225deg);background-color:#FFF;height:4px;width:18px;transition:transform 0.3s, background-color 0.3s;-webkit-transition:transform 0.3s, background-color 0.3s;}
#arrow-2 .spin-dropdown .spinner-spin:hover {border-color:rgba(0,0,0,0.9);}
#arrow-2 .spin-dropdown .spinner-spin:hover:before {background-color:#E0346A;}
#arrow-2 .spin-dropdown .spinner-spin:hover:after {background-color:#E0346A;}
#arrow-2 .spin-dropdown input[type=checkbox]:checked ~ .spinner-spin {border-color:transparent;}
#arrow-2 .spin-dropdown input[type=checkbox]:checked ~ .spinner-spin:before {background-color:#E0346A;margin-top:-4px;transform:rotate(-225deg);-webkit-transform:rotate(-225deg);}
#arrow-2 .spin-dropdown input[type=checkbox]:checked ~ .spinner-spin:after {background-color:#E0346A;margin-top:-4px;transform:rotate(225deg);-webkit-transform:rotate(225deg);}
/* ARROW 3 */
#arrow-3 {margin:10.5%;}
#arrow-3 .dropdown {width:138px;}
#arrow-3 .dropdown ol {position:relative;float:left;list-style:none;margin:0;padding:0;overflow:hidden;}
#arrow-3 .dropdown ol > li {padding: 6px 14px;height:36px;font-size:20px;overflow:hidden;}
#arrow-3 .dropdown ol > li:nth-child(odd) {background-color:#CCC;}
#arrow-3 .dropdown ol > li:nth-child(even) {background-color:#FFF;}
#arrow-3 .dropdown ol > li:first-child {z-index:50;border-left:2px solid #AAA;}
#arrow-3 .dropdown ol > li:not(:first-child) {z-index:0;padding:0 14px;margin-left:2px;}
#arrow-3 .dropdown ol > li:not(:first-child):nth-child(even) {transform:translateX(150%);-webkit-transform:translateX(150%);}
#arrow-3 .dropdown ol > li:not(:first-child):nth-child(odd) {transform:translateX(-150%);-webkit-transform:translateX(-150%);}
#arrow-3 .dropdown li a {text-decoration:none;}
#arrow-3 .dropdown li a:hover {text-decoration:none;color:#E0346A !important;}
#arrow-3 .dropdown li:nth-child(odd) a {color:#FFF;}
#arrow-3 .dropdown li:nth-child(even) a {color:#CCC;}
#arrow-3 #dropdown-form {position:relative;margin:0px 0 0 35px;z-index:50;}
#arrow-3 .dropdown input[type=checkbox] {display:none;}
#arrow-3 .dropdown .spinner-spin {cursor:pointer;position:relative;float:left;border:18px solid #CCC;background:none;}
#arrow-3 .dropdown .spinner-spin:hover {border-color:#CCC;}
#arrow-3 .dropdown .spinner-spin:hover:before {background-color:#E0346A;}
#arrow-3 .dropdown .spinner-spin:hover:after {background-color:#E0346A;}
#arrow-3 .dropdown input[type=checkbox]:checked ~ .spinner-spin {border-color:#CCC;}
#arrow-3 .dropdown input[type=checkbox]:checked ~ .spinner-spin:before {background-color:#E0346A;margin-top:-2px;transform:rotate(-225deg);-webkit-transform:rotate(-225deg);}
#arrow-3 .dropdown input[type=checkbox]:checked ~ .spinner-spin:after {background-color:#E0346A;margin-top:-2px;transform:rotate(225deg);-webkit-transform:rotate(225deg);}
#arrow-3 .dropdown .spinner-spin:before {content:'';position:absolute;margin-left:-11px;margin-top:-1px;transform:rotate(225deg);-webkit-transform:rotate(225deg);background-color:#FFF;height:4px;width:15px;transition:transform 0.3s, margin 0.3s, background-color 0.3s;-webkit-transition:transform 0.3s, background-color 0.3s;}
#arrow-3 .dropdown .spinner-spin:after {content:'';position:absolute;margin-left:-3px;margin-top:-1px;transform:rotate(-225deg);-webkit-transform:rotate(-225deg);background-color:#FFF;height:4px;width:15px;transition:transform 0.3s, margin 0.3s, background-color 0.3s;-webkit-transition:transform 0.3s, background-color 0.3s;}
#arrow-3 .dropdown input[type=checkbox]:checked ~ #dropdown-form ol > li:not(:first-child) {z-index:0;padding:6px 14px;transform:translateX(0px);-webkit-transform:translateX(0px);}
| Developer | Izzy Skye |
| Username | zephyr |
| Uploaded | October 27, 2022 |
| Rating | 3 |
| Size | 2,776 Kb |
| Views | 32,384 |
Do you need developer help for Pure CSS Arrow Collection?
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!
Izzy Skye (zephyr) Script Codes
| Name | Size |
| JQuery Slider | 3,529 Kb |
| Responsive Menu Concept | 7,150 Kb |
| Simple Pure CSS Loader | 2,028 Kb |
| Pure CSS Dropdown Button | 2,192 Kb |
| Pure CSS Tab Navigation | 3,259 Kb |
| Pure CSS Menu Transition | 2,027 Kb |
| Pure CSS Read More Arrow | 1,747 Kb |
| Pure CSS Loader | 3,596 Kb |
| Pure CSS Social Widget | 2,262 Kb |
| Pure CSS Inanimate Cube Field | 2,255 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
| A Pen by James Podles | Jpod | 2,656 Kb |
| Brian The CSS Bee | Jonitrythall | 3,922 Kb |
| Popup Modal | Aldlevine | 3,696 Kb |
| Twinkling Stars | Ripley6811 | 2,750 Kb |
| Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Faux column absolute wrapper | Yurimorini | 1,823 Kb |
| Hello People | Danburrows | 2,365 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
Do you want hide your ip address?
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!