Wired Link Mixin
How do I make an wired link mixin?
A Sass mixin for a link animation that is used on Wired. https://www.wired.com/. What is a wired link mixin? How do you make a wired link mixin? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.
Wired Link Mixin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wired Link Mixin</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lora'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <p>Live-edge wayfarers you probably haven't heard of them deep v, vegan banh mi street art synth fap selvage hell of poke <a href="#">cold-pressed</a>. Etsy hoodie gentrify pabst. XOXO live-edge aesthetic, butcher affogato plaid poke. Yuccie <a href="#">humblebrag</a> direct trade, marfa ramps offal actually. <a href="#">Raw denim</a> blue bottle meh gochujang banjo kogi cold-pressed. Cred master cleanse irony bushwick. Raclette enamel pin gentrify air plant marfa shabby chic.</p>
</div>
</body>
</html>
Wired Link Mixin - Script Codes CSS Codes
body { margin: 0; padding: 0;
}
* { box-sizing: border-box;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; width: 100%; font-family: 'Lora', serif; -webkit-font-smoothing: antialiased; font-size: 1.25em; line-height: 1.6; color: #000; background-color: #fff;
}
div { width: 90%;
}
@media (min-width: 48em) { div { width: 50%; }
}
a { text-decoration: none; color: #000; border-bottom: 3px solid #b4e7f8; box-shadow: inset 0 -4px 0 #b4e7f8; cursor: pointer; -webkit-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}
a:hover, a:focus { background-color: #b4e7f8;
}
Developer | Thomas Vaeth |
Username | thomasvaeth |
Uploaded | September 24, 2022 |
Rating | 4.5 |
Size | 2,718 Kb |
Views | 16,192 |
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 |
Image Loop on Hover | 6,080 Kb |
Twitch.tv | 3,413 Kb |
SVG Mouse Animation | 2,542 Kb |
Button Split Mixin | 2,543 Kb |
Button Draw on Hover Mixin | 58,405 Kb |
Random Quote Machine | 5,186 Kb |
Calculator | 2,959 Kb |
Camper Leaderboard | 3,464 Kb |
Button Offset Mixin | 2,746 Kb |
Full Viewport Z-Index Scroll | 3,020 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 |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
Slider css only | Armandobau | 2,161 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Tic Tac Toe | Volv | 4,862 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!