Skew Button
How do I make an skew button?
As minimal as I am. A skewisch ghost button.. What is a skew button? How do you make a skew button? This script and codes were developed by Dean Hidri on 01 October 2022, Saturday.
Skew Button Previews
Skew Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Skew Button</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <div class="container"> <button class="btn btn--skew btn-default"> <span>Button</span> </button>
</div>
<!-- Updated on Fri 21 Aug 2015 --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Skew Button - Script Codes CSS Codes
html,
body { height: 100%;
}
.container { max-width: 960px; height: 100%; margin-right: auto; margin-left: auto; 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;
}
.btn { background: transparent; color: inherit; text-decoration: none; border: 0; -webkit-transition: all 200ms ease-in; transition: all 200ms ease-in; display: inline-block;
}
.btn-default { color: black; font-weight: bold; text-transform: uppercase; border: 4px solid black; padding: 12px 28px;
}
.btn-default:hover { background: black; color: white;
}
.btn--skew { -webkit-transform: skew(-10deg); transform: skew(-10deg);
}
.btn--skew > span { -webkit-transform: skew(10deg); transform: skew(10deg); display: inline-block;
}
Developer | Dean Hidri |
Username | visualcookie |
Uploaded | October 01, 2022 |
Rating | 4 |
Size | 2,354 Kb |
Views | 30,360 |
Do you need developer help for Skew Button?
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!
Similar Scripts & Codes
Name | Username | Size |
Easing | GreenSock | 2,043 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Project MMetro beta | Atomicsong | 5,157 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!