Button Color SASS Mixin
How do I make an button color sass mixin?
A SASS mixin that makes creating different colored buttons simple.. What is a button color sass mixin? How do you make a button color sass mixin? This script and codes were developed by Tommy Creenan on 31 August 2022, Wednesday.
Button Color SASS Mixin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Color SASS Mixin</title> <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> <a href="#" class="btn btn-orange">Button</a>
<a href="#" class="btn btn-blue">Button</a>
<a href="#" class="btn btn-light-blue">Button</a>
</body>
</html>
Button Color SASS Mixin - Script Codes CSS Codes
.btn { cursor: pointer; display: inline-block; margin: 10px; padding: 6px 12px; text-align: center; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
a.btn { padding: 24px 16px; text-decoration: none;
}
.btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
.btn-orange { background: #f46a22; color: #fff; box-shadow: 0 3px #772d06; -webkit-transition: none; -moz-transition: none; transition: none;
}
.btn-orange:hover { color: #fff; box-shadow: 0 2px #772d06; top: 1px;
}
.btn-orange:active { color: #fff; box-shadow: 0 0 #772d06; top: 3px;
}
.btn-blue { background: #127ea9; color: #fff; box-shadow: 0 3px #03171f; -webkit-transition: none; -moz-transition: none; transition: none;
}
.btn-blue:hover { color: #fff; box-shadow: 0 2px #03171f; top: 1px;
}
.btn-blue:active { color: #fff; box-shadow: 0 0 #03171f; top: 3px;
}
.btn-light-blue { background: #a4e6fe; color: #fff; box-shadow: 0 3px #0dbcfc; -webkit-transition: none; -moz-transition: none; transition: none;
}
.btn-light-blue:hover { color: #fff; box-shadow: 0 2px #0dbcfc; top: 1px;
}
.btn-light-blue:active { color: #fff; box-shadow: 0 0 #0dbcfc; top: 3px;
}
Developer | Tommy Creenan |
Username | TommyCreenan |
Uploaded | August 31, 2022 |
Rating | 3 |
Size | 2,363 Kb |
Views | 44,528 |
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 |
SCSS Column mixin with optional margin | 2,298 Kb |
CSS Grid Experiment | 1,588 Kb |
CSS Donation Thermometer | 2,331 Kb |
Helm Page Loader | 3,756 Kb |
Column-count ul | 1,664 Kb |
Equal Height jQuery Columns | 2,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 |
Pure CSS Tooltip | APinix | 2,815 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Welcome | Nakome | 6,076 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Blog | Rottingroom | 1,430 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!