Button Style Matrix - Powered by CSS Custom Properties
How do I make an button style matrix - powered by css custom properties?
What is a button style matrix - powered by css custom properties? How do you make a button style matrix - powered by css custom properties? This script and codes were developed by Jon Milner on 19 December 2022, Monday.
Button Style Matrix - Powered by CSS Custom Properties Previews
Button Style Matrix - Powered by CSS Custom Properties - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Style Matrix - Powered by CSS Custom Properties</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <h1>Button Style Matrix - Powered by CSS Custom Properties</h1> <div class="c-buttons"> <span>Default</span> <button class="c-button">Button</button> <button class="c-button c-button--theme-blue">Button</button> <button class="c-button c-button--theme-bluegray">Button</button> <button class="c-button c-button--theme-gray">Button</button> <button class="c-button c-button--theme-green">Button</button> <button class="c-button c-button--theme-orange">Button</button> <button class="c-button c-button--theme-purple">Button</button> <button class="c-button c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>Bordered</span> <button class="c-button c-button--appearance-bordered">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-green">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-bordered c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>Boredered + Muted</span> <button class="c-button c-button--appearance-bordered-muted">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-green">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-bordered-muted c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>Flat</span> <button class="c-button c-button--appearance-flat">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-green">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-flat c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>Flat + Muted</span> <button class="c-button c-button--appearance-flat-muted">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-green">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-flat-muted c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>White</span> <button class="c-button c-button--appearance-white">Button</button> <button class="c-button c-button--appearance-white c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-white c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-white c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-white c-button--theme-green">Button</button> <button class="c-button c-button--appearance-white c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-white c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-white c-button--theme-red">Button</button> </div> <div class="c-buttons"> <span>White + Muted</span> <button class="c-button c-button--appearance-white-muted">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-blue">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-bluegray">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-gray">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-green">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-orange">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-purple">Button</button> <button class="c-button c-button--appearance-white-muted c-button--theme-red">Button</button> </div> <h2><a href="https://jonmilner.com" target="_blank">jonmilner.com</a></h2>
</div>
</body>
</html>
Button Style Matrix - Powered by CSS Custom Properties - Script Codes CSS Codes
/* ========================================================================== * Colors * ========================================================================== */
/* Base */
/* UI */
/* ========================================================================== * Theme * ========================================================================== */
/* ========================================================================== * Reset * ========================================================================== */
* { border: 0; margin: 0; padding: 0;
}
*,
::before,
::after { background-repeat: no-repeat; box-sizing: inherit;
}
*:focus { outline: none;
}
html { box-sizing: border-box; cursor: default; text-size-adjust: 100%;
}
body { background-color: #f3f5f6; font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height: 0; min-width: 320px; text-decoration-skip: ink;
}
a { color: inherit;
}
button { background-color: transparent; display: none; font-size: 0; text-align: left;
}
::selection { background: #1e7ec1; color: #fff;
}
/* ========================================================================== * Block * ========================================================================== */
.c-buttons { margin: calc(1rem * -1) calc(0.5rem * -1); }
.c-button { --background-color: var(--theme-primary, var(--theme-primary-default)); --border-color: var(--theme-primary, var(--theme-primary-default)); --color: var(--theme-secondary, var(--theme-secondary-default)); --font-size: 16px; --line-height: 1.3; --padding: 0.5rem 0.625rem; /* For perfectly square icon buttons */ --theme-primary-default: #dbe1e5; --theme-secondary-default: #8f8f8f; background-color: var(--background-color); border-color: var(--border-color); border-radius: 3px; border-style: solid; border-width: 2px; color: var(--color); cursor: pointer; display: inline-block; font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--font-size); font-weight: 700; line-height: var(--line-height); margin: 1rem 0.5rem; padding: var(--padding); position: relative; text-align: center; text-decoration: none; transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-out; user-select: none; vertical-align: middle; white-space: nowrap; }
.c-button:hover { --theme-secondary-default: #767676;
}
/* ========================================================================== * Modifiers - Appearance * ========================================================================== */
.c-button--appearance-bordered { --background-color: transparent; --border-color: var(--theme-primary, #dbe1e5); --color: var(--theme-primary, var(--theme-secondary-default)); }
.c-button--appearance-flat { --background-color: transparent; --border-color: transparent; --color: var(--theme-primary, var(--theme-secondary-default)); }
.c-button--appearance-white { --background-color: #fff; --border-color: #fff; --color: var(--theme-primary, var(--theme-secondary-default)); }
.c-button--appearance-bordered-muted { --background-color: transparent; --border-color: var(--theme-primary, #dbe1e5); --color: var(--theme-primary, var(--theme-secondary-default));
}
.c-button--appearance-bordered-muted:not(:hover) { --border-color: #dbe1e5; --color: var(--theme-secondary-default);
}
.c-button--appearance-flat-muted { --background-color: transparent; --border-color: transparent; --color: var(--theme-primary, var(--theme-secondary-default));
}
.c-button--appearance-flat-muted:not(:hover) { --theme-primary: var(--theme-secondary-default); --theme-secondary: var(--theme-primary-default);
}
.c-button--appearance-white-muted { --background-color: #fff; --border-color: #fff; --color: var(--theme-primary, var(--theme-secondary-default));
}
.c-button--appearance-white-muted:not(:hover) { --theme-primary: var(--theme-secondary-default); --theme-secondary: var(--theme-primary-default);
}
/* ========================================================================== * Modifiers - Theme * ========================================================================== */
.c-button--theme-blue { --theme-primary: #1e7ec1; --theme-secondary: #fff; }
.c-button--theme-bluegray { --theme-primary: #6f848f; --theme-secondary: #fff; }
.c-button--theme-gray { --theme-primary: #5f5f5f; --theme-secondary: #fff; }
.c-button--theme-green { --theme-primary: #31c903; --theme-secondary: #fff; }
.c-button--theme-orange { --theme-primary: #f47920; --theme-secondary: #fff; }
.c-button--theme-purple { --theme-primary: #8558b1; --theme-secondary: #fff; }
.c-button--theme-red { --theme-primary: #f53c20; --theme-secondary: #fff; }
/* ========================================================================== * Demo * ========================================================================== */
body { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 3rem;
}
h1 { font-size: 18px; line-height: 1.5; margin-bottom: 4rem; text-align: center;
}
h2 { color: #8f8f8f; font-size: 14px; line-height: 1.5; margin-top: 4rem; text-align: center;
}
.c-buttons { position: relative;
}
.c-buttons > span { color: #afafaf; font-size: 14px; font-style: italic; left: calc(1rem * -1); line-height: 1.5; position: absolute; top: 50%; transform: translate(-100%, -50%); vertical-align: middle;
}
| Developer | Jon Milner |
| Username | jonmilner |
| Uploaded | December 19, 2022 |
| Rating | 3 |
| Size | 4,874 Kb |
| Views | 12,144 |
Do you need developer help for Button Style Matrix - Powered by CSS Custom Properties?
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!
Jon Milner (jonmilner) Script Codes
| Name | Size |
| Simple Accordion Menu | 3,291 Kb |
| Kirby in CSS | 4,062 Kb |
| Animated Hamburger Menu Icon | 2,952 Kb |
| Custom Form Styles | 4,749 Kb |
| Responsive Card Layout using CSS Columns | 2,651 Kb |
| Cisco Logo Loading Animation | 2,949 Kb |
| Playing Around with AMCSS | 2,454 Kb |
| A Pen by Jon Milner | 3,675 Kb |
| Chomp Chomp | 3,438 Kb |
| Kitty Blocks | 2,783 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
| Slick Slider | Wearebold | 5,913 Kb |
| Perspective Origin Demo | Agelber | 3,614 Kb |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
| Click Based Rotation Demo | Zeaklous | 2,086 Kb |
| Tooltip in table | Roine | 3,713 Kb |
| AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
| Personal Logo Animation | Lloydwheeler | 3,795 Kb |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Header Line Issue | Charlie-volpe | 1,768 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!