Gradient Borders Will Be the Death of Me - CourtneyR.dev's 2nd Brain

Gradient Borders Will Be the Death of Me ![rw-book-cover](https://i.ytimg.com/vi/s1ZrF7PdV1Y/maxresdefault.jpg) Full Document Contents/Articles/Gradient Borders Will Be the Death of Me.md, Gradient Borders Will Be the Death of Me, Syntax. ## Document Notes --- tags: [css, web-design, ui-components] author: Kevin Powell source: YouTube reference: https://www.youtube.com/watch?v=s1ZrF7PdV1Y date created: 2024-12-28 14:32 --- # 🏷️ Title: Gradient borders will be the death of me ## 🧰 Action Inbox - [H1] Create reusable gradient button component system — CSS variables for extensibility #css #components - [H2] Implement proper gradient border technique — wrapper element strategy #css #gradients - [H3] Add smooth hover transitions with @property — color-mix animation limitations #css #animation ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Source Video](https://www.youtube.com/watch?v=s1ZrF7PdV1Y) - [MDN CSS @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) ## 📝 Summary - Kevin Powell takes on a CSS speed challenge to recreate gradient buttons in under 30 minutes - Demonstrates advanced CSS techniques including CSS variables, color-mix, gradient borders, and hover states - Shows real-world problem-solving including pivot from direct border approach to wrapper element strategy - Creates extensible button system with warning, error, success, and ghost variants - Completes challenge in approximately 29 minutes with functional, interactive buttons ## 📖 Main Content This video showcases a practical CSS coding session where Kevin Powell attempts to rapidly recreate a set of stylized gradient buttons. The challenge involves multiple advanced CSS concepts including linear gradients for backgrounds, inset box shadows for depth, gradient borders (notoriously difficult in CSS), and interactive hover/active states. The key technical challenge centers on gradient borders, which cannot be achieved with standard CSS border properties. Powell initially attempts a direct approach but pivots to using wrapper elements - a span inside each button - to achieve the layered gradient effect. This requires restructuring the HTML mid-stream and redistributing CSS properties between the button and span elements. The solution leverages modern CSS features like color-mix() for color manipulation and CSS custom properties for creating an extensible system where button variants can be created by simply changing a single color variable. The final implementation includes smooth hover effects and click animations for enhanced user experience. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/s1ZrF7PdV1Y?t=0) — [H1] Challenge setup and initial structure - Key idea: Speed challenge to recreate gradient buttons with real-world constraints - Evidence: "I'm going to be trying to not only get this done as fast as possible, but make these things actually buttons that I would want to use in my real code" #### ⏱️ [01:30](https://youtu.be/s1ZrF7PdV1Y?t=90) — [H2] Basic container and button layout - Key idea: Flexbox container with column direction and gap for button spacing - Evidence: "display flex, flex direction column, gap of something just like 40 pixels" #### ⏱️ [03:15](https://youtu.be/s1ZrF7PdV1Y?t=195) — [H2] CSS custom properties for extensible design - Key idea: Using CSS variables for color system to enable easy variant creation - Evidence: "I'm using CSS variables for this obviously because that way we can just override the variables" #### ⏱️ [04:45](https://youtu.be/s1ZrF7PdV1Y?t=285) — [H2] Linear gradient background implementation - Key idea: Creating depth with gradient using relative color syntax - Evidence: "linear gradient to bottom, from var color to RGB from var color with 0.2 opacity" #### ⏱️ [07:30](https://youtu.be/s1ZrF7PdV1Y?t=450) — [H2] Border radius and spacing adjustments - Key idea: Fine-tuning visual proportions with border-radius and padding - Evidence: "border radius 25 pixels... padding of one rem and then something like 10 pixels" #### ⏱️ [09:45](https://youtu.be/s1ZrF7PdV1Y?t=585) — [H2] Inset box shadow for glass effect - Key idea: Adding inner highlight with inset box shadow for depth - Evidence: "box shadow inset RGB 255 255 255 forward slash 0.3... two pixel blur" #### ⏱️ [12:00](https://youtu.be/s1ZrF7PdV1Y?t=720) — [H2] Button variant classes and color system - Key idea: Semantic class names for different button states and purposes - Evidence: "warning for yellow, error for red, success for green, ghost for gray" #### ⏱️ [15:30](https://youtu.be/s1ZrF7PdV1Y?t=930) — [H1] Gradient border challenge recognition - Key idea: Realizing gradient borders require wrapper element strategy - Evidence: "gradient border is not very chill right now... I hate gradient borders" #### ⏱️ [17:45](https://youtu.be/s1ZrF7PdV1Y?t=1065) — [H1] HTML restructure with wrapper spans - Key idea: Adding span elements inside buttons to enable gradient border technique - Evidence: "I am going to do a wrapper in my HTML... I have a span" #### ⏱️ [20:15](https://youtu.be/s1ZrF7PdV1Y?t=1215) — [H2] Color-mix vs relative color syntax - Key idea: Discovering color-mix provides better control than relative color syntax - Evidence: "I think in this particular case, let's do color-mix... mixing the color and white" #### ⏱️ [23:30](https://youtu.be/s1ZrF7PdV1Y?t=1410) — [H2] Interactive hover states implementation - Key idea: Creating hover effects by modifying color-mix percentages - Evidence: "if we hover, top purr is now going to be equal to 90%" #### ⏱️ [25:45](https://youtu.be/s1ZrF7PdV1Y?t=1545) — [H3] CSS @property for animation attempts - Key idea: Exploring modern CSS animation techniques for gradient transitions - Evidence: "@property and this will be top... syntax is not going to be an angle, it's going to be a percent" #### ⏱️ [27:30](https://youtu.be/s1ZrF7PdV1Y?t=1650) — [H2] Click states and final touches - Key idea: Adding active states with transform and refined hover effects - Evidence: "when we click it active, we can do a translate zero one pix... nice little push" #### ⏱️ [29:00](https://youtu.be/s1ZrF7PdV1Y?t=1740) — [H1] Challenge completion and extensibility demo - Key idea: Demonstrating the power of the CSS variable system for variants - Evidence: "If I wanted to make these things purple, bingo, bango, we got a purple button that just works" ## 📚 References - [Original Video](https://www.youtube.com/watch?v=s1ZrF7PdV1Y) - [CSS color-mix() MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) - [CSS @property MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) - [CSS Custom Properties MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) ## 🗣️ Paraphrase - Powell demonstrates rapid prototyping of complex CSS components under time pressure, showing real problem-solving process - The gradient border problem illustrates why certain CSS techniques require structural HTML changes, not just styling - Modern CSS features like color-mix() and custom properties enable more maintainable and flexible component systems ## 📰 Newsletter **Quick CSS Challenge: Mastering Gradient Buttons in 30 Minutes** Ever wondered how to tackle those tricky gradient borders that make even experienced developers want to pull their hair out? Kevin Powell just completed a lightning-fast CSS challenge that showcases some brilliant techniques for creating professional-grade button components. The key breakthrough? Sometimes the best CSS solution requires rethinking your HTML structure. Powell's pivot from direct border styling to wrapper elements demonstrates how real-world problem-solving often involves strategic compromises. **What you'll learn:** - Advanced gradient techniques with modern color-mix() - CSS cust > [!note]+ Document Notes > tags: [css, web-design, ui-components] > author: Kevin Powell > source: YouTube > reference: https://www.youtube.com/watch?v=s1ZrF7PdV1Y > date created: 2024-12-28 14:32 > > # 🏷️ Title: Gradient borders will be the death of me >  ## 🧰 Action Inbox - [H1] Create reusable gradient button component system — CSS variables for extensibility #css #components - [H2] Implement proper gradient border technique — wrapper element strategy #css #gradients - [H3] Add smooth hover transitions with @property — color-mix animation limitations #css #animation ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Source Video](https://www.youtube.com/watch?v=s1ZrF7PdV1Y) - [MDN CSS @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) ## 📝 Summary - Kevin Powell takes on a CSS speed challenge to recreate gradient buttons in under 30 minutes - Demonstrates advanced CSS techniques including CSS variables, color-mix, gradient borders, and hover states - Shows real-world problem-solving including pivot from direct border approach to wrapper element strategy - Creates extensible button system with warning, error, success, and ghost variants - Completes challenge in approximately 29 minutes with functional, interactive buttons ## 📖 Main Content This video showcases a practical CSS coding session where Kevin Powell attempts to rapidly recreate a set of stylized gradient buttons. The challenge involves multiple advanced CSS concepts including linear gradients for backgrounds, inset box shadows for depth, gradient borders (notoriously difficult in CSS), and interactive hover/active states. The key technical challenge centers on gradient borders, which cannot be achieved with standard CSS border properties. Powell initially attempts a direct approach but pivots to using wrapper elements - a span inside each button - to achieve the layered gradient effect. This requires restructuring the HTML mid-stream and redistributing CSS properties between the button and span elements. The solution leverages modern CSS features like color-mix() for color manipulation and CSS custom properties for creating an extensible system where button variants can be created by simply changing a single color variable. The final implementation includes smooth hover effects and click animations for enhanced user experience. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/s1ZrF7PdV1Y?t=0) — [H1] Challenge setup and initial structure - Key idea: Speed challenge to recreate gradient buttons with real-world constraints - Evidence: "I'm going to be trying to not only get this done as fast as possible, but make these things actually buttons that I would want to use in my real code" #### ⏱️ [01:30](https://youtu.be/s1ZrF7PdV1Y?t=90) — [H2] Basic container and button layout - Key idea: Flexbox container with column direction and gap for button spacing - Evidence: "display flex, flex direction column, gap of something just like 40 pixels" #### ⏱️ [03:15](https://youtu.be/s1ZrF7PdV1Y?t=195) — [H2] CSS custom properties for extensible design - Key idea: Using CSS variables for color system to enable easy variant creation - Evidence: "I'm using CSS variables for this obviously because that way we can just override the variables" #### ⏱️ [04:45](https://youtu.be/s1ZrF7PdV1Y?t=285) — [H2] Linear gradient background implementation - Key idea: Creating depth with gradient using relative color syntax - Evidence: "linear gradient to bottom, from var color to RGB from var color with 0.2 opacity" #### ⏱️ [07:30](https://youtu.be/s1ZrF7PdV1Y?t=450) — [H2] Border radius and spacing adjustments - Key idea: Fine-tuning visual proportions with border-radius and padding - Evidence: "border radius 25 pixels... padding of one rem and then something like 10 pixels" #### ⏱️ [09:45](https://youtu.be/s1ZrF7PdV1Y?t=585) — [H2] Inset box shadow for glass effect - Key idea: Adding inner highlight with inset box shadow for depth - Evidence: "box shadow inset RGB 255 255 255 forward slash 0.3... two pixel blur" #### ⏱️ [12:00](https://youtu.be/s1ZrF7PdV1Y?t=720) — [H2] Button variant classes and color system - Key idea: Semantic class names for different button states and purposes - Evidence: "warning for yellow, error for red, success for green, ghost for gray" #### ⏱️ [15:30](https://youtu.be/s1ZrF7PdV1Y?t=930) — [H1] Gradient border challenge recognition - Key idea: Realizing gradient borders require wrapper element strategy - Evidence: "gradient border is not very chill right now... I hate gradient borders" #### ⏱️ [17:45](https://youtu.be/s1ZrF7PdV1Y?t=1065) — [H1] HTML restructure with wrapper spans - Key idea: Adding span elements inside buttons to enable gradient border technique - Evidence: "I am going to do a wrapper in my HTML... I have a span" #### ⏱️ [20:15](https://youtu.be/s1ZrF7PdV1Y?t=1215) — [H2] Color-mix vs relative color syntax - Key idea: Discovering color-mix provides better control than relative color syntax - Evidence: "I think in this particular case, let's do color-mix... mixing the color and white" #### ⏱️ [23:30](https://youtu.be/s1ZrF7PdV1Y?t=1410) — [H2] Interactive hover states implementation - Key idea: Creating hover effects by modifying color-mix percentages - Evidence: "if we hover, top purr is now going to be equal to 90%" #### ⏱️ [25:45](https://youtu.be/s1ZrF7PdV1Y?t=1545) — [H3] CSS @property for animation attempts - Key idea: Exploring modern CSS animation techniques for gradient transitions - Evidence: "@property and this will be top... syntax is not going to be an angle, it's going to be a percent" #### ⏱️ [27:30](https://youtu.be/s1ZrF7PdV1Y?t=1650) — [H2] Click states and final touches - Key idea: Adding active states with transform and refined hover effects - Evidence: "when we click it active, we can do a translate zero one pix... nice little push" #### ⏱️ [29:00](https://youtu.be/s1ZrF7PdV1Y?t=1740) — [H1] Challenge completion and extensibility demo - Key idea: Demonstrating the power of the CSS variable system for variants - Evidence: "If I wanted to make these things purple, bingo, bango, we got a purple button that just works" ## 📚 References - [Original Video](https://www.youtube.com/watch?v=s1ZrF7PdV1Y) - [CSS color-mix() MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) - [CSS @property MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) - [CSS Custom Properties MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) ## 🗣️ Paraphrase - Powell demonstrates rapid prototyping of complex CSS components under time pressure, showing real problem-solving process - The gradient border problem illustrates why certain CSS techniques require structural HTML changes, not just styling - Modern CSS features like color-mix() and custom properties enable more maintainable and flexible component systems ## 📰 Newsletter **Quick CSS Challenge: Mastering Gradient Buttons in 30 Minutes** Ever wondered how to tackle those tricky gradient borders that make even experienced developers want to pull their hair out? Kevin Powell just completed a lightning-fast CSS challenge that showcases some brilliant techniques for creating professional-grade button components. The key breakthrough? Sometimes the best CSS solution requires rethinking your HTML structure. Powell's pivot from direct border styling to wrapper elements demonstrates how real-world problem-solving often involves strategic compromises. **What you'll learn:** - Advanced gradient techniques with modern color-mix() - CSS custom property systems for component scalability - Why gradient borders need wrapper elements (and how to implement them) - Interactive state management with hover and active effects **Try it yourself:** The original challenge design is linked in Powell's video description. Time yourself and see how your approach compares! Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create gradient border tutorial series showing multiple techniques - Education: Workshop on modern CSS color functions and their performance implications - Developer experience: Document gradient border patterns in component library - Developer marketing: Social media series on CSS challenges and time-boxing development - Community management: Facilitate CSS speedrun challenges in developer community #### WordPress - Core: Evaluate gradient border components for block editor interface elements - Design: Create design system documentation for gradient button patterns - Documentation: Add advanced CSS tutorials to WordPress developer resources - Training: Include modern CSS techniques in WordPress theme development courses ## 🧪 Hypotheses - Color-mix() provides better maintainability than relative color syntax for component systems - Wrapper element strategy for gradient borders is more reliable than pseudo-element approaches - CSS custom properties enable more scalable component architectures than preprocessor variables - Time-constrained development reveals the most practical CSS techniques ### 📊 Methodology - A/B test color-mix vs relative color syntax in production components - Performance benchmarking of different gradient border implementation strategies - User testing of button interaction feedback and animation preferences ### ❓ Questions - How do gradient border techniques perform across different browsers and devices? - What's the accessibility impact of complex gradient and shadow combinations? - Can CSS container queries improve responsive behavior of gradient components? ### 🔮 Future Research - CSS Houdini custom properties for animatable gradient transitions - Web Components integration with advanced CSS gradient techniques - Performance optimization strategies for complex CSS visual effects ### 💡 Implications - Practice: Gradient borders require HTML structure planning, not just CSS solutions - Policy: Component libraries need documentation for complex visual effect implementation - Education: Modern CSS features change optimal development approaches and require updated training - Performance: Complex gradients and shadows can impact rendering performance on lower-end devices ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 8 #### 👀 Visual learners - Present: Live coding demonstration, before/after comparisons, visual debugging - Improve: Gradient technique comparison charts, CSS property visualization diagrams #### 🔊 Aural learners - Present: Real-time narration of problem-solving process - Improve: Audio summary of key techniques and decision points #### 🗣️ Verbal learners - Present: Clear explanations of CSS terminology, reasoning for each approach - Improve: Glossary of gradient-related CSS terms and concepts #### 🧩 Kinesthetic learners - Present: Hands-on coding challenge format, interactive debugging - Improve: Step-by-step coding exercises, downloadable starter files #### 🧠 Logical learners - Present: Problem identification, solution comparison, systematic approach - Improve: Decision tree for gradient border technique selection #### 🧑‍🤝‍🧑 Social learners - Present: Community challenge format, sharing results encouragement - Improve: Code review sessions, collaborative technique development #### 🧘‍♀️ Solitary learners - Present: Self-paced challenge format, independent problem solving - Improve: Reflection prompts on technique selection rationale #### 🌿 Naturalistic learners - Present: Organic problem-solving process, adaptive technique selection - Improve: Pattern recognition exercises for CSS architecture decisions ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Semantic button elements maintained throughout refactoring - Improve: ARIA labels for button variants, role descriptions for complex interactions #### Keyboard navigation - Present: Native button focus behavior preserved - Improve: Custom focus indicators that work with gradient designs #### Contrast and readability - Present: Attention to color contrast in gradient implementations - Improve: Systematic contrast testing across all button variants #### Text resizing and reflow - Present: Responsive design considerations mentioned - Improve: Testing at 200% zoom, rem-based sizing validation #### Media and captions - Present: Live coding with narration - Improve: Time-stamped technique summaries, downloadable transcripts #### Forms and interactions - Present: Proper button semantics, hover and focus states - Improve: Reduced motion preferences for gradient animations ### 🌍 DEIB Assessment #### Cultural breadth - Present: Accessible coding challenge format - Improve: International color perception considerations for gradient choices #### Inclusive language - Present: Technical explanations avoid jargon where possible - Improve: Define CSS terminology for newer developers #### Neurodiversity support - Present: Step-by-step problem solving, clear structure - Improve: Technique summary cards, visual progress indicators #### Representation - Present: Focus on technical skills over personal characteristics - Improve: Diverse example use cases for button components #### Psychological safety - Present: Honest mistake-making and problem-solving process - Improve: Normalize debugging and iteration in learning materials ### ✅ Logical Validity #### Strong reasoning - Deductive strength: CSS gradient limitations logically lead to wrapper element necessity - Inductive strength: Multiple technique attempts build toward optimal solution - Causal reasoning: Clear cause-effect between CSS properties and visual outcomes - Analogical strength: Comparison between different gradient approaches shows trade-offs #### Fallacies - Appeal to tradition: Brief dismissal of alternative gradient techniques without full exploration - False dilemma: Limited consideration of pseudo-element gradient approaches #### Tone of voice - Overall tone: Authentic, problem-solving focused, encouraging experimentation with honest acknowledgment of complexity ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attack patterns present - Reverse victim/offender: No reversal patterns present - Emotional cues and rhetoric: Positive, educational tone focused on skill development ## 🎯 Conclusion - Kevin Powell successfully demonstrates advanced CSS gradient techniques under time pressure, completing the challenge in 29 minutes - The key insight is that gradient borders often require structural HTML changes, not just CSS solutions - wrapper elements enable the layered effects needed - Modern CSS features like color-mix() and custom properties create more maintainable component systems than older approaches - The real-world problem-solving process, including mistakes and pivots, provides valuable learning for developers tackling similar challenges ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] CSS gradient borders require wrapper elements for reliable implementation > [!quote] [Gradient borders will be the death of me](https://www.youtube.com/watch?v=s1ZrF7PdV1Y) by [[Kevin Powell]] via [[YouTube]]. Published 2024. Accessed 2024-12-28. > "I am going to do a wrapper in my HTML... I have a span." Demonstrates the structural HTML requirements for complex CSS visual effects --- ## Full Transcript [00:00] I'm challenging myself to a lightning [00:02] round CSS battle where I'm going to see [00:04] how fast I can get these buttons done. [00:08] Now, these buttons come from Thiago [00:10] Alexandrino. The starting code that I [00:12] have is just five buttons. I'm going to [00:14] be trying to not only get this done as [00:17] fast as possible, but make these things [00:19] actually buttons that I would want to [00:21] use in my real code. And I'm going to be [00:23] doing all of this with just CSS, [00:25] obviously. Now, I've got my stopwatch [00:28] here. I'm going to hit go on this thing [00:30] and see how fast I can get this done. [00:32] I'll link this up in the description if [00:35] you want to see how fast you can get [00:37] these buttons done. We're going to be [00:38] working on the Honor system here, but [00:40] use that image. Uh, get these buttons [00:42] done. Do a custom hover seat on these [00:44] bad boys and let me know how fast you [00:46] were able to do it. Even better if you [00:48] record yourself, share that video and [00:51] we'll check it out. Let's get going on [00:53] this thing. Uh, I have all the stuff [00:55] here. I do have a div wrapping all of [00:57] these buttons and so I can just target [00:59] that div just itself. We're going to do [01:00] a display flex. We're going to do flex [01:02] direction column, not a flood color. Uh [01:05] what in the world? We're going to have a [01:07] gap of something just like 40 pixels [01:09] here. And we are going to right now have [01:12] a max width of this entire thing as like [01:15] a 600 pixels. Now that's not going to [01:17] determine the max width of these buttons [01:19] by any means. So let's go ahead and get [01:21] our initial button kind of style down. [01:24] I'm actually going to start with this [01:27] kind of gray one right here, or maybe [01:29] even just the blue one. We're going to [01:30] have a default button styling. Now, [01:32] let's zoom in on these to get a good eye [01:35] of what's going on. Of course, there's [01:38] plenty of pixels in this, so we're [01:39] getting a lot of pixels. I'm going to [01:41] actually pick the color. And the blue [01:43] one will be the default. So, we'll just [01:44] have this button color. We'll say this [01:47] is going to be the main color. And it is [01:49] going to just be at this point this [01:51] blue. Now we'll say color is equal to [01:54] vary color. I'm using CSS variables for [01:58] this obviously because that way we can [02:00] just override the variables. But not [02:02] only that, they'll be able to do some [02:03] cool stuff. Like for instance, we have [02:06] this border. We have an inset border. So [02:09] let's take a look at what we have. We [02:11] have a light gradient that's going from [02:12] something to something here. We do have [02:14] a white on the inset here. And we do [02:18] have a border that also has what appears [02:21] to be a gradient. And the border [02:23] gradient is a tough thing to do. There's [02:26] a number of different strategies you can [02:27] do with a border gradient. Let's go [02:29] ahead and first and foremost get this [02:30] background going. So we're going to do a [02:32] background. We're going to do a linear [02:34] gradient. We're going to go from or [02:37] we'll say to bottom and comma. We're [02:41] going to start from right now vary [02:44] color. That will change. And then we're [02:46] going to go to varyen [02:49] color. And we're going to use relative [02:51] color syntax on this thing. I'm going to [02:53] eyeball this for the most part. The easy [02:54] way to do this would be do a color [02:56] picker and just pick this hex value. But [02:58] that's not how I would do it in real [02:59] life. So I don't want to do it that way. [03:01] We're going to say RGB from and we're [03:03] going to say from the color RGB, we're [03:05] going to get RGB and then forward slash [03:08] and we'll say something like 0.2. So [03:11] from that to that. And actually, I'm [03:13] just going to straight up duplicate this [03:14] line and say we're going to go from 0 to [03:16] 0.5 here. Okay, that honestly, we're [03:20] saying two bottom from top to bottom. [03:22] That actually doesn't look terrible [03:24] right off the jump, even just zooming in [03:26] here. So, I'm going to keep that for [03:28] right now. We're also going to say this [03:30] has a border of var. Actually, instead [03:32] of var, I'm going to grab this one right [03:35] here. We're going to worry about the [03:37] gradient border after this. We're going [03:38] to say solid 1 pix. There we go. And the [03:41] border radius on these things is pretty [03:44] severe. If you do border radius 50% on [03:50] this, it makes it look like this. So, [03:52] you have to use a pixel value for [03:53] something. And it's hard to give this a [03:56] pixel value just straight up. Even [03:58] though I just did it uh 25 pixels and it [04:00] just looks great here, it's hard to do [04:02] this and, you know, not know what the [04:04] size of these buttons is going to be. [04:06] But, uh, we'll just keep it at this for [04:07] right now. If I zoom in on mine, there's [04:10] some funniness going on with the border [04:12] and the background gradient. If we do [04:14] overflow hidden, I actually don't know [04:17] if that will fix. Doesn't fix. Overflow [04:19] hidden does not fix. That's interesting [04:21] is because we currently have a border [04:24] that has transparency in it. It's [04:27] overlapping with the linear gradient. I [04:29] actually don't know about that. That's [04:31] interesting. Also, this is what they [04:33] look like right now. So, let's actually [04:36] give these a font size of something [04:38] considerably larger for right now. 24 [04:40] pixels. That at least looks a little bit [04:42] better here. That way, we're not zoomed [04:44] in super high. And we have some space [04:46] here. I'm not going to worry too much [04:48] about the font. We have some space. The [04:50] spacing on these is always interesting [04:52] because what you end up getting, you [04:53] want buttons that are all the same [04:55] width. Uh I'll worry about the width [04:56] part later, but let's do just a padding [04:58] of something like one rim and then [05:00] something like 10 pixels. And this is [05:03] going to give them considerably more [05:04] space. Let's do something like 0.75 RAM. [05:07] Me just uh typing in values till it [05:09] looks nice. Now, honestly, you could [05:10] just measure all this and do it all in [05:12] pixels. And that's probably fine, too. [05:14] The border definitely needs to be more [05:16] than one pixel, but probably not that [05:18] much more. Like two pixels, pretty good [05:21] here um in terms of what this actually [05:23] looks like. And now I'm going to [05:25] actually do the inset box shadow because [05:28] these have an inset box shadow. You can [05:29] see already that our our 25 border [05:31] radius that we had doesn't work. Um, [05:33] let's bump it up to 35. So, we'll say [05:35] box shadow inset and we're going to say [05:39] RGB 255 255 255 uh forward/0.3. [05:44] Save this. Actually, this is going to do [05:46] nothing. I typically put the word inset [05:48] at the end too, just for consistency [05:51] sake. And the distance on this thing is [05:53] going to be 0 0. And let's do like a two [05:56] pixel blur and a two pixel distance on [05:59] it. In fact, let's make this right now. [06:02] Sometimes I do this. I want to see what [06:04] it looks like. We'll have it be very [06:06] non-transparent. So the two pixel blur [06:08] might actually be a little bit much. The [06:10] one pixel blur looks pretty good. The [06:12] two pixel like this looks pretty decent. [06:14] And then if you bounce out, okay, that [06:16] might be too much. Again, bump it back [06:18] down. We're getting pretty close there. [06:20] But I do have to feel like if we look at [06:22] these, it is the two pixel blur I think [06:24] was better representative of their [06:26] style. So already getting pretty close. [06:29] Okay, so the way we have these is that [06:31] there's several buttons. We can add some [06:33] classes to these. So class and the first [06:36] one will just be I like to call yellow [06:38] stuff warning and then we'll say error [06:41] for the red. We'll say success [06:46] for the green and then ghost for the [06:49] gray. Why did I just pick these names? [06:51] Well, I don't know. I I could have just [06:53] done edit remove except declined. I [06:55] could have just done that, but instead I [06:57] did warning error, success, and ghost [06:58] because that's what I like to work in. [07:00] So, uh warning and then [07:04] errors success ghost. Now the reason the [07:07] whole reason we did this with CSS [07:10] variables in this way is because you can [07:12] just reassign this color variable here. [07:16] We can use the color picker. We can pick [07:18] this color. We can paste it in here and [07:22] we'll be able to see that this now all [07:24] of a sudden gets us way closer really [07:26] quickly. In terms of time here, what am [07:28] I at? I'm at 9 minutes. Okay. Um I was [07:30] hoping to have this done faster than 9 [07:32] minutes. Uh but you know me, I'm always [07:35] way too optimistic. I see this and I [07:37] could say, I could do this in a [07:38] 10-minute CSS battle, no problem. And [07:40] then the time comes by and next thing [07:42] you know, you're this far. But, ooh, [07:45] it's looking really good already. Now, [07:47] with these buttons, I do like to have a [07:50] padding on the side. But like, if we [07:52] were to say the width of these is [07:54] something like 200 pixels, right? It [07:56] gets them all a little bit more similar. [07:58] Now, the big problem ends up being when [08:00] you do that, you end up having long [08:03] buttons. You got to worry about that. [08:05] Yeah, it it's something that you do have [08:06] to be cautious about because the buttons [08:08] in the example are all the same width no [08:10] matter what. You could have that be a [08:12] max width. Um that would be no max width [08:16] wouldn't work either cuz then they [08:17] minimum width would would say that [08:19] wouldn't work either cuz like if we did [08:22] min width, they're now going to go way [08:24] far. I think just straight up width on [08:26] these is fine for right now. And I do [08:29] honestly think it's probably way more [08:31] accurate when I define that width than I [08:33] was expecting. So, you know what? I I [08:35] feel like I'm kind of doing a decent job [08:37] here getting these buttons going pretty [08:39] quickly. The big thing that we don't [08:40] have right now is the gradient border. I [08:43] hate gradient borders, which mine still [08:46] looks funky. The gradient border is not [08:48] very chill right now. Uh I do have the [08:51] inset shadow is looking pretty chill. [08:54] And everything else kind of looks right. [08:57] Honestly, I think the intensity of the [08:59] gradient for the button itself could [09:02] maybe be dialed down, but they look [09:04] pretty glassy and and kind of cool. [09:06] Okay, let's keep moving. They do have a [09:08] box shadow on. I don't know if you can [09:10] see this. We'll say zero for X, but for [09:12] the Y, it was like something pretty [09:15] decent, like 20 pixels. The blur is [09:17] massive. Uh, we'll say 20 pixels for [09:19] that and zero for the spread. We'll say [09:22] RGB. We'll give this black because 0000 [09:25] you can always add more opacity to black [09:27] which is what we'll be doing. Okay, [09:29] because that's a pretty heavy box shadow [09:32] relative to what they actually have in [09:34] their one. But if we did something like [09:36] 05, this looks way more close to what [09:38] they have. Okay, let's add an align [09:41] items center on this just for fun. Yeah, [09:44] this is looking pretty good. This [09:45] gradient border, man, what is the [09:47] strategy that people use for gradient [09:49] borders? There's a number of ways you [09:50] could do gradient borders. I've done [09:51] gradient borders so many times in CSS [09:54] and it feels like I always dislike the [09:57] strategy because what you can do is you [09:59] can have a background and then you have [10:01] like a span on it. So you have a wrapper [10:03] element is a very common way to do this. [10:05] The way that I've always done this is [10:07] with a wrapper. So I guess I am going to [10:10] do a wrapper in my HTML. I'm not talking [10:12] about uh Kendrick Lamar here. Sorry for [10:15] that joke folks. I am a father of two. [10:17] Okay. I have a span. I hate this because [10:20] I just did all this work and now I'm [10:22] going to have to say, "Oh, dear God, [10:24] Scott." Okay, I'm trying to go fast. I'm [10:26] trying to go very fast. Very fast. Very [10:28] fast. Very fast. [10:30] Okay, so uh obviously that just totally [10:33] screws it all up quite a bit. The [10:36] background of the button is going to be [10:37] a gradient. So, we will want to have a [10:40] gradient for the background of the [10:42] button. What other things do we need to [10:43] have on the button itself? We'll want to [10:45] have the font size. We'll want to have [10:48] even like the color is fine to move on [10:50] to the button itself. There we go. The [10:53] border [10:55] well the border will in fact live on the [10:57] button although it's not going to be a [10:58] border. The border radius will live on [11:00] the button. The box shadow will live on [11:04] the span but the inset will live on the [11:08] span and the noninset will live on the [11:13] wrapper. Okay. So, I should have done [11:15] this from the start. I instead of being [11:17] like, "Oh, I'll solve this later." I [11:18] should have solved this from the dang [11:20] start. Okay. Okay. Width will be on the [11:22] button and then padding will be on the [11:25] span. Okay. Why does this look so [11:28] terrible? We'll need to give the spans [11:30] display block or they got to be inline [11:33] block. It doesn't really matter. Maybe [11:35] block. Why is there a border on Oh, cuz [11:39] I don't have color defined on this. [11:40] Okay, this is going to fix things right [11:42] here. Okay, that gets a little bit [11:44] better. Now, why is the first one so [11:46] much worse? Is this for real? Let me [11:48] refresh this. Why is the first one so [11:50] much worse? Oh no. This one gets a [11:52] color. This gets a color. That overrides [11:54] all that stuff. Why exactly does this [11:57] one not have a span in it? I didn't put [11:59] a span in the first one. [12:01] What was I thinking? Okay, save that. [12:04] Good. We do need to have the same border [12:06] radius, I suppose, on the span. This [12:09] feels wrong now. This feels very wrong [12:11] because we have the padding on there. [12:14] The button itself is having some default [12:16] padding. So, we'll just say padding [12:18] zero. Or is it because of the width side [12:21] of things? If we give this a width, does [12:23] that fix it? No, it doesn't. Let's do [12:25] computed. The button has a two pixel [12:28] border on it. Okay, let's get rid of the [12:30] border. Okay, border none. Let's zoom in [12:33] on these things. Of course, I've like [12:34] ruined this whole thing by adding this. [12:37] What I don't understand is where this [12:39] additional padding is coming from. We'll [12:41] just say padding is zero. Do buttons [12:45] have default padding on them? I guess [12:46] they do. The only difference is is that [12:48] when we do the gradient for this part, [12:50] we want it to be reversed. We want it to [12:52] start light and go dark. Start light, go [12:56] dark. And how dark should it go? It [12:57] should go much darker. Like that darker. [13:01] Like that. Really feels pretty good. The [13:04] top one needs to be quite a bit darker [13:07] as well. The problem now is that we're [13:10] doing a linear gradient and we now have [13:13] double the color. So, this all feels [13:16] like you're having one gradient and then [13:19] another gradient and since we're doing [13:21] opacity here. So, that really screws me [13:23] up for a number of reasons. So, we're [13:25] using relative color syntax here to do [13:30] opacity, which does in fact work [13:32] decently well on a white background for [13:36] these things. But if we do color mix, we [13:39] do color mix and mix it with white. I've [13:43] been for weeks here, I've been thinking [13:45] to myself, man, relative color really [13:48] rules compared to color mix. I have been [13:51] reaching for relative color kind of [13:53] non-stop. I think I might be wrong. I [13:56] think in this particular case, let's do [13:58] color hyphen mix. Color mix is just [14:01] something I haven't been doing. We're [14:02] going to say in RGB, we're mixing the [14:07] hyphen [14:09] color and we're mixing white. So, that [14:12] just mixes the two. What is the If we [14:14] want to give this a percentage, how do [14:16] we do that? And it looks like I seem to [14:18] need to be using sRGB [14:21] apparently. [14:23] And I think I need to say something like [14:25] we're going to do 90% white here. Does [14:28] that work? It works. Okay. So, this is [14:31] already kind of solving some of the [14:33] problems that I was having. And instead [14:34] of doing relative color, which was a [14:37] great guess and a great thing that I [14:38] like to do, I can do color mix and I can [14:43] get us Oh, is this is it's more subtle. [14:48] I'm I'm doing it way way too much. Oh my [14:50] god. Zoom. What in the world? Zooming [14:54] in. Oh my dear lord. Okay, so now we [14:56] have a gradient on the top, which [14:58] doesn't actually uh that could probably [15:01] be color mix as well. We do have a nice [15:04] little thing here. What I'm noticing is [15:06] that the color is looking pretty decent [15:09] on these things. And overall, I think I [15:13] kind of crushed this. Now, this one does [15:15] look a little bit darker. Looks a little [15:17] bit darker. And a little bit darker [15:19] here, too. So, let's bump this down to [15:21] 85 and let's bump this down to 95. Maybe [15:24] even bump this down to 80 even and get [15:28] some more depth in here. This looks [15:30] pretty stinking good. I'm going to close [15:32] this. I'm going to bump this up side by [15:33] side. Let's get some interactive states [15:35] in here and just like really make these [15:37] things feel nice. So, if we want to [15:39] hover on these bad boys, what would we [15:41] want to have happen? So, if we were to [15:43] say like we're going to hover on these, [15:46] what do you see happening? Like [15:48] typically if a button it maybe in a [15:50] hover state it can like get lighter. So [15:53] you could always say that color mix [15:55] percentage is changing. Like for [15:58] instance if we had the top [16:01] purr which is going to be like 80%. If [16:04] we have that top purr right here at 80% [16:08] var and you'll say top I don't know why [16:12] I named it top purr. That's a terrible [16:14] name but hey sometimes we just do name [16:16] things like that. If we hover, we could [16:18] say top purr is now going to be equal to [16:20] 90%. And when we hover over these, they [16:23] all should get a little bit lighter. [16:24] Now, the big problem with this is that [16:26] this is a a gradient and like [16:28] transitioning gradient values is [16:30] difficult. You could do that with at [16:33] property. We'll see if this actually [16:35] works. I I don't know if you can [16:36] transition a color mix. So, we'll say [16:39] add property and this will be top and [16:42] I'm going to change this to hyphen top [16:44] property. The syntax is not going to be [16:46] an angle. It's going to be a percent, I [16:48] believe. Let's see. Percent. Is that one [16:50] of them? Is percent. One of the things [16:53] you can have as an at property. Just [16:55] give me the MDN docs, please. Percent. [16:58] It is percent. Percent edge. Inherits is [17:00] going to be true. Initial is going to be [17:03] 80%. And let's get rid of this one. [17:05] Okay. Now, no, doesn't animate. That's [17:09] fine. We don't have a transition on this [17:11] bad boy anyways. Also, I still use the [17:14] word top per underscore in here instead [17:17] of top hyphen per. It's always fun to [17:19] change a variable name. And I'm just [17:20] going to put a classic transition 0.3 [17:24] sec ease all. Just do a a a blanket [17:28] attachment of all here just to see if I [17:30] can get any transition on this thing. [17:32] Yeah, I just don't I don't know if you [17:34] can even with that percentage change [17:37] linear gradient progress. So, I'm [17:40] modifying the percentage value inside of [17:43] color mix and it is not animating or [17:48] transitioning. And honestly, that's [17:50] okay. I'm going to do a cursor pointer [17:52] on this thing. I know I know that's [17:53] controversial. People like cursor [17:54] pointer. The shadow can get darker. This [17:56] is quite a bit darker. No. [18:01] Okay. And then when we click it active, [18:05] we can just do a translate zero one pix. [18:10] Got a nice little push in there. And for [18:13] this one, the top purr will be actually [18:17] getting darker when you click it. Let's [18:19] do a straight up 80% when you click it. [18:21] Or is that where it is currently? It [18:23] starts at 80. Let's do all the way down [18:26] to 50%. When you click it, [18:30] that's too much. That's way too much. [18:32] Let's do 70. Perfect. It feels a little [18:36] floaty because of that transition on [18:38] here. And if that transition isn't [18:39] actually doing anything beyond the [18:41] shadow, we could say we want to [18:43] transition the uh not all but box [18:46] shadow. Okay. So the the top little [18:49] feels snappier. Perfect. I think this is [18:53] pretty good. I think I crushed this. And [18:55] I think it looks pretty dang good. And [18:56] when you click them, you hover over [18:58] them, they get a nice little state. They [19:00] get clearly highlighted here. Click it. [19:02] Click it. Click it. Click it. Feels [19:04] nice. I kind of like these buttons. [19:07] Cool. The only thing I wish I was [19:09] working on here would be the transition [19:10] on that gradient. Either way, let me [19:12] know what you thought of this speedrun. [19:14] Let me top this off. Again, I probably [19:16] could have finished this earlier, but [19:18] here we are with 29 and I'm going to [19:21] finish it just under 30 minutes. Knocked [19:23] these bad boy buttons out. And again, [19:25] they're nice and extendable because what [19:27] we can do is just change their color. If [19:29] I wanted to make these things purple, [19:32] bingo, bango, we got a purple button [19:34] that just works. Let me know how fast [19:35] you got these buttons done. Post your [19:37] links below.  ## Highlights - have a default button styling. Now, let's zoom in on these to get a good eye of what's going on. Of course, there's plenty of pixels in this, so we're getting a lot of pixels. I'm going to actually pick the color. And the blue one will be the default. So, we'll just have this button color. We'll say this is going to be the main color. And it is going to just be at this point this blue. Now we'll say color is equal to vary color. I'm using CSS variables for this obviously because that way we can ([View Highlight](https://read.readwise.io/read/01khfp95jqgh68bzb69pbgpc2t)) - Tags: 👻 ai highlighted - background going. So we're going to do a background. We're going to do a linear gradient. We're going to go from or we'll say to bottom [music] and comma. We're going to start from right now vary color. That will change. And then we're going to go to varyen color. And we're going to use relative color syntax on this thing. I'm going to eyeball this for the most part. The easy way to do this would be do a color picker and just pick this hex value. But that's not how I would do it in real life. So I don't want to do it that way. ([View Highlight](https://read.readwise.io/read/01khfp95jyq0j1x770wgrn15dq)) - Tags: 👻 ai highlighted - has a border of var. Actually, instead of var, I'm going to grab this one right here. We're going to worry about the gradient border after this. We're going to say solid 1 pix. There we go. And the border radius on these things is pretty severe. If you do border radius 50% on this, it makes it look like this. So, you have to use a pixel value for something. And it's hard to give this a pixel value just straight up. Even though I just did it uh 25 pixels and it ([View Highlight](https://read.readwise.io/read/01khfp95kd9eckvx2k7e4bgqs2)) - Tags: 👻 ai highlighted - accurate when I define that width than I was expecting. So, you know what? I I feel like I'm kind of doing a decent job here getting these buttons going pretty quickly. The big thing that we don't have right now is the gradient border. I hate gradient borders, which mine still looks funky. The gradient border is not very chill right now. Uh I do have the inset shadow is looking pretty chill. And everything else kind of looks right. Honestly, I think the intensity of the gradient for the button itself could ([View Highlight](https://read.readwise.io/read/01khfp95mh1qn7vyjpn45rhr9a)) - Tags: 👻 ai highlighted