Button Offset Mixin

Developer
Thomas Vaeth
Size
2,746 Kb
Views
36,432
  1. Button Offset Mixin Previews
  2. Button Offset Mixin HTML Codes
  3. Button Offset Mixin CSS Codes

How do I make an button offset mixin?

A Sass mixin for a link animation where a box slides up on hover.. What is a button offset mixin? How do you make a button offset mixin? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

Button Offset Mixin Previews
IQ Test

Button Offset Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Offset Mixin</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Quattrocento:700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="btn" href="#"> <div> <span>Hover Me</span> <span>Hover Me</span> </div>
</a>
</body>
</html>

Button Offset 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: "Quattrocento", serif; -webkit-font-smoothing: antialiased; background-color: #fff;
}
a { font-size: 2em; text-decoration: none;
}
.btn { position: relative; z-index: 1; display: inline-block; color: #494949;
}
.btn:after { content: ""; position: absolute; top: 3px; left: 3px; display: block; height: 100%; width: 100%; padding: 1px; border-right: 1px solid #494949; border-bottom: 1px solid #494949;
}
.btn:hover > * > *, .btn:active > * > *, .btn:focus > * > * { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
}
.btn > * { position: relative; border: 1px solid #494949; overflow: hidden;
}
.btn > * > * { display: block; padding: 0.5em 1em; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: -webkit-transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98), -webkit-transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
.btn > * > *:last-child { position: absolute; color: #494949; background-color: #feeaeb;
}
Button Offset Mixin - Script Codes
Button Offset Mixin - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 4.5
Size 2,746 Kb
Views 36,432
Do you need developer help for Button Offset Mixin?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Instafetch.js Example
Flexbox Grid Animation
Wikipedia Viewer
Calculator
Pokemon React
Local Weather
Wired Link Mixin
Personal Portfolio Webpage
Twitch.tv
Button Draw on Hover Mixin
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!