Mixins for semi-transparent colors
How do I make an mixins for semi-transparent colors?
What is a mixins for semi-transparent colors? How do you make a mixins for semi-transparent colors? This script and codes were developed by John W. Long on 24 September 2022, Saturday.
Mixins for semi-transparent colors - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mixins for semi-transparent colors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="panel"> <button type="button" class="button">Hello world!</button>
</div>
<div class="panel green-panel"> <button type="button" class="button">Hello world!</button>
</div>
<div class="panel orange-panel"> <button type="button" class="button">Hello world!</button>
</div>
</body>
</html>
Mixins for semi-transparent colors - Script Codes CSS Codes
.button { -moz-appearance: none; -webkit-appearance: none; font-family: sans-serif; font-size: 14px; padding: 0.4em 1em 0.5em; -webkit-font-smoothing: antialiased; background: gray; background: rgba(0, 0, 0, 0.5); border: 1px solid; border-color: #4d4d4d; border-color: rgba(0, 0, 0, 0.7); color: white; color: rgba(255, 255, 255, 0.8); -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; cursor: pointer;
}
.button:focus, .button:hover { background: #b3b3b3; background: rgba(0, 0, 0, 0.3); color: white;
}
.button:focus { outline: none;
}
.button:active { background: #666666; background: rgba(0, 0, 0, 0.6); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.panel { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 220px; padding: 50px; text-align: center; margin: 15px; background: gray; float: left;
}
.panel .button { background: #404040; background: rgba(0, 0, 0, 0.5); border: 1px solid; border-color: #262626; border-color: rgba(0, 0, 0, 0.7); color: #e6e6e6; color: rgba(255, 255, 255, 0.8); -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.panel .button:focus, .panel .button:hover { background: #5a5a5a; background: rgba(0, 0, 0, 0.3); color: white;
}
.panel .button:focus { outline: none;
}
.panel .button:active { background: #333333; background: rgba(0, 0, 0, 0.6); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.green-panel { background: #393;
}
.green-panel .button { background: #1a4d1a; background: rgba(0, 0, 0, 0.5); border: 1px solid; border-color: #0f2e0f; border-color: rgba(0, 0, 0, 0.7); color: #d6ebd6; color: rgba(255, 255, 255, 0.8); -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.green-panel .button:focus, .green-panel .button:hover { background: #246b24; background: rgba(0, 0, 0, 0.3); color: white;
}
.green-panel .button:focus { outline: none;
}
.green-panel .button:active { background: #143d14; background: rgba(0, 0, 0, 0.6); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.orange-panel { background: #f73;
}
.orange-panel .button { background: #803c1a; background: rgba(0, 0, 0, 0.5); border: 1px solid; border-color: #4d240f; border-color: rgba(0, 0, 0, 0.7); color: #ffe4d6; color: rgba(255, 255, 255, 0.8); -moz-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset; box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset;
}
.orange-panel .button:focus, .orange-panel .button:hover { background: #b35324; background: rgba(0, 0, 0, 0.3); color: white;
}
.orange-panel .button:focus { outline: none;
}
.orange-panel .button:active { background: #663014; background: rgba(0, 0, 0, 0.6); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
Developer | John W. Long |
Username | jlong |
Uploaded | September 24, 2022 |
Rating | 3.5 |
Size | 2,620 Kb |
Views | 26,312 |
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 |
Sass Radar | 6,887 Kb |
Animated CSS Timer Spinner | 2,769 Kb |
Simple menu 2 | 3,382 Kb |
Pure CSS Spinners | 2,043 Kb |
Horizontal Bar Graph with D3 | 2,944 Kb |
Animated CSS Ball Loader | 3,707 Kb |
Modular Typography | 6,827 Kb |
Animated CSS Dots Loader | 3,317 Kb |
Animated CSS Throbber | 2,665 Kb |
The Matrix in Sass | 15,344 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 |
Main page display | BarryKe | 4,562 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Sass Radar | Jlong | 6,887 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 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!