Sweet Ass Buttons
How do I make an sweet ass buttons?
Buttons use pseudo elements that create overlapping borders. On the down state the background fills and animates down.. What is a sweet ass buttons? How do you make a sweet ass buttons? This script and codes were developed by Ali on 07 August 2022, Sunday.
Sweet Ass Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sweet Ass Buttons</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <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">
<h1>Sweet Buttons</h1>
<p>Cool buttons with cool downstate using pseudo classes</p>
<a href="#" class="button">Your Community</a>
<a href="#" class="button">Find Out More</a>
<a href="#" class="button">Online / Offline</a>
<a href="#" class="button">Our Products</a>
<a href="#" class="button">Data Control</a>
<a href="#" class="button">Contact</a>
<p class="by">by <a href="https://twitter.com/alistairtweedie" target="_blank">this guy</a> and <a href="https://twitter.com/stuartartl" target="_blank">this guy</a>.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Sweet Ass Buttons - Script Codes CSS Codes
body { background-color: #f2f2f2; font-family: 'Lato', sans-serif; font-size: 21px; text-align: center;
}
.container { width: 900px; margin: 100px auto;
}
/* button */
.button{ display: block; float: left; position: relative; text-decoration: none; color: #333; border: 3px solid #333333; padding: 20px 30px; margin: 40px;
}
/* blue border offset */
.button:after { content: ''; border: 3px solid #3600fc; top: 5px; left: 5px; width: 100%; height: 100%; position: absolute; z-index: -1; color: #f2f2f2; white-space:nowrap;
}
/* grey border position */
.button:active { top: 3px; left: 3px;
}
/* blue border position */
.button:active:after{ top: 2px; left: 2px
}
/* fill background color */
.button:hover{ background: rgba(242,242,242,1);
}
.by { display: block; float: left; width: 100%;
}
Developer | Ali |
Username | alistairtweedie |
Uploaded | August 07, 2022 |
Rating | 4 |
Size | 2,154 Kb |
Views | 72,864 |
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 |
Twitter buttons without the iframe | 2,827 Kb |
Off canvas slider concept | 2,696 Kb |
Social buttons | 1,870 Kb |
Animated svg - Pintsize logo | 3,985 Kb |
The pursuit of tidy code | 2,437 Kb |
Colors | 4,459 Kb |
Mobile first social buttons with no iframe | 3,158 Kb |
Vertical Rhythm | 3,066 Kb |
Responsive gallery | 2,010 Kb |
Cookie Fun | 2,869 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 |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 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!