Wrinkle links

Developer
Andrew Canham
Size
4,205 Kb
Views
44,528
  1. Wrinkle links Previews
  2. Wrinkle links HTML Codes
  3. Wrinkle links CSS Codes
  4. Wrinkle links JS Codes

How do I make an wrinkle links?

Hover to reveal simple 3d animation that pulls back the edge of the button. What is a wrinkle links? How do you make a wrinkle links? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.

Wrinkle links Previews
IQ Test

Wrinkle links - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wrinkle links</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="display"> <a href="#" class="btn"> Home <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px" viewBox="0 0 14 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="7,0 0,7 1,8 2,7 2,14 6,14 6,10 8,10 8,14 12,14 12,7 12,7 13,8 14,7 "/> </svg> </span> </div> </a> <a href="#" class="btn"> Calendar <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px"viewBox="0 0 14 14" xml:space="preserve"> <g> <path fill="#FFFFFF" d="M11,2V0H9v2H5V0H3v2H0v12h14V2H11z M12,12H2V5h10V12z"/> <rect fill="#FFFFFF" x="3" y="6" width="2" height="2"/> <rect fill="#FFFFFF" x="3" y="9" width="2" height="2"/> <rect fill="#FFFFFF" x="6" y="6" width="2" height="2"/> <rect fill="#FFFFFF" x="6" y="9" width="2" height="2"/> <rect fill="#FFFFFF" x="9" y="6" width="2" height="2"/> <rect fill="#FFFFFF" x="9" y="9" width="2" height="2"/> </g> </svg> </span> </div> </a> <a href="#" class="btn"> Cloud <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px" viewBox="0 0 14 14" xml:space="preserve"> <path fill="#FFFFFF" d="M12.3,8h-0.8C11.8,7.4,12,6.7,12,6c0-2.2-1.8-4-4-4C6.1,2,4.5,3.3,4.1,5.1C3.9,5,3.7,5,3.5,5 C1.6,5,0,6.6,0,8.5S1.6,12,3.5,12c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0h8.6c0.9,0,1.7-0.9,1.7-2C14,8.9,13.2,8,12.3,8z"/> </svg> </span> </div> </a> <a href="#" class="btn"> Location <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px" viewBox="0 0 14 14" xml:space="preserve"> <path fill="#FFFFFF" d="M12,5c0-2.8-2.2-5-5-5S2,2.2,2,5c0,1.1,0.4,2.2,1,3h0l4,6l4-6h0C11.6,7.2,12,6.1,12,5z M7,7C5.9,7,5,6.1,5,5 c0-1.1,0.9-2,2-2s2,0.9,2,2C9,6.1,8.1,7,7,7z"/> </svg> </span> </div> </a> <a href="#" class="btn"> Settings <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px" viewBox="0 0 13.4 14" xml:space="preserve"> <path fill="#FFFFFF" d="M11.9,7c0-0.3,0-0.6-0.1-0.8l1.5-1.3c-0.3-1-0.8-1.9-1.5-2.6L10,3C9.5,2.6,9.1,2.3,8.5,2.1L8.2,0.2 C7.7,0.1,7.2,0,6.7,0c-0.5,0-1,0.1-1.5,0.2L4.8,2.1C4.3,2.3,3.8,2.6,3.4,3L1.5,2.3C0.8,3,0.3,3.9,0,4.9l1.5,1.3 c0,0.3-0.1,0.6-0.1,0.9c0,0.3,0,0.6,0.1,0.9L0,9.1c0.3,1,0.8,1.9,1.5,2.6L3.4,11c0.4,0.4,0.9,0.7,1.5,0.9l0.3,1.9 c0.5,0.1,1,0.2,1.5,0.2c0.5,0,1-0.1,1.5-0.2l0.3-1.9c0.5-0.2,1-0.5,1.5-0.9l1.8,0.7c0.7-0.7,1.2-1.6,1.5-2.6l-1.5-1.3 C11.9,7.6,11.9,7.3,11.9,7z M6.7,9.6C5.2,9.6,4,8.5,4,7c0-1.5,1.2-2.6,2.6-2.6c1.5,0,2.6,1.2,2.6,2.6C9.3,8.5,8.1,9.6,6.7,9.6z"/> </svg> </span> </div> </a> <a href="#" class="btn"> Contact <div class="right"> <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve"> <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/> </svg> <span class="before"> </span> <span class="after"> <svg x="0px" y="0px" viewBox="0 0 14 13" xml:space="preserve"> <polygon fill="#FFFFFF" points="3,13 6,10 14,10 14,0 0,0 0,10 3,10 "/> </svg> </span> </div> </a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wrinkle links - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:100);
body { background: #daf1fe; font-family: 'Roboto', sans-serif; font-size: 18px;
}
div.display { left: 50%; position: absolute; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}
a.btn { background: #78a7c0; color: #fff; display: block; padding: 16px 30px; position: relative; text-decoration: none; width: 200px; z-index: 5;
}
a.btn div.right { background: #5590b0; height: 100%; -webkit-perspective: 500; -ms-perspective: 500; perspective: 500; position: absolute; right: 0; top: 0; width: 100px;
}
a.btn div.right span.before { background: #78a7c0; content: ""; display: block; height: 100%; left: 0; position: absolute; -webkit-transform-origin: left; transform-origin: left; top: 0; width: 50px; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; z-index: 10;
}
a.btn div.right span.after { background: #78a7c0; content: ""; display: block; height: 100%; right: 0; position: absolute; -webkit-transform-origin: right; transform-origin: right; top: 0; width: 50px; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; z-index: 10;
}
a.btn div.right svg { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 14px;
}
a.btn div.right > svg { -webkit-transition: all 0.15s linear; transition: all 0.15s linear; right: 40px; z-index: 5;
}
a.btn.hover,
a.btn:hover { z-index: 10;
}
a.btn.hover div.right span.before,
a.btn:hover div.right span.before { background: #6a9eba; -webkit-transform: rotateY(-55deg); transform: rotateY(-55deg);
}
a.btn.hover div.right span.after,
a.btn:hover div.right span.after { background: #86b0c6; right: 43px; -webkit-transform: rotateY(55deg); transform: rotateY(55deg);
}
a.btn.hover div.right > svg,
a.btn:hover div.right > svg { right: 15px;
}

Wrinkle links - Script Codes JS Codes

$('a.btn').on("touchstart", function (e) { $('a.btn').removeClass('hover'); 'use strict'; //satisfy code inspectors var link = $(this); //preselect the link if (link.hasClass('hover')) { return true; } else { link.addClass('hover'); $('a.taphover').not(this).removeClass('hover'); e.preventDefault(); return false; //extra, and to make sure the function has consistent return points }
});
Wrinkle links - Script Codes
Wrinkle links - Script Codes
Home Page Home
Developer Andrew Canham
Username candroo
Uploaded August 23, 2022
Rating 4.5
Size 4,205 Kb
Views 44,528
Do you need developer help for Wrinkle links?

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!

Andrew Canham (candroo) Script Codes
Name
Angled nav reveal
3D cube - hover rotate
Footer animation
Faux 3D grid
Hover effect
Motivational message
Spread cards
Faux 3D grid with image reveal
Cloxperiment
Cube grid
Create amazing art & images 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!