Sass button border hover effect mixin
How do I make an sass button border hover effect mixin?
A mixin from my other pen, CSS border transitions.See also another effect drawing each border individually.. What is a sass button border hover effect mixin? How do you make a sass button border hover effect mixin? This script and codes were developed by Giana on 01 September 2022, Thursday.
Sass button border hover effect mixin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sass button border hover effect mixin</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="btn draw-border">Draw Border</button>
</body>
</html>
Sass button border hover effect mixin - Script Codes CSS Codes
.draw-border { box-shadow: inset 0 0 0 4px #58afd1; color: #58afd1; -webkit-transition: color 0.25s 0.08333s; transition: color 0.25s 0.08333s; position: relative;
}
.draw-border::before, .draw-border::after { border: 0 solid transparent; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;
}
.draw-border::before { border-bottom-width: 4px; border-left-width: 4px;
}
.draw-border::after { border-top-width: 4px; border-right-width: 4px;
}
.draw-border:hover { color: #ffe593;
}
.draw-border:hover::before, .draw-border:hover::after { border-color: #ffe593; -webkit-transition: border-color 0s, width 0.25s, height 0.25s; transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;
}
.draw-border:hover::before { -webkit-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;
}
.draw-border:hover::after { -webkit-transition-delay: 0s, 0.25s, 0s; transition-delay: 0s, 0.25s, 0s;
}
.btn { background: none; border: none; cursor: pointer; line-height: 1.5; font: 700 1.2rem 'Roboto Slab', sans-serif; padding: 1em 2em; letter-spacing: 0.05rem;
}
.btn:focus { outline: 2px dotted #55d7dc;
}
body { background: #1f1a25; 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; min-height: 100vh;
}
Developer | Giana |
Username | giana |
Uploaded | September 01, 2022 |
Rating | 4.5 |
Size | 2,875 Kb |
Views | 48,576 |
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 |
Fully Functional Sentient CLI | 4,534 Kb |
Galaxy | 2,744 Kb |
HTML 5 Video Player | 10,489 Kb |
Button hover effects with box-shadow | 4,557 Kb |
CSS Particles | 5,265 Kb |
CSS box shadow particles | 66,118 Kb |
CSS box shadow animation | 12,668 Kb |
Sass border drawing mixin | 3,010 Kb |
Neon bubbles | 3,559 Kb |
CSS-only shimmering neon text | 3,661 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 |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
This in constructor context | _shree33 | 1,718 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Scroll using CSS | Casperovic | 2,159 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!