ACSS 101.10: All Things Buttons (Styles, Variants, Mixins, Recipes, & Custom Buttons)
ฝัง
- เผยแพร่เมื่อ 23 มิ.ย. 2024
- ACSS has the most robust and powerful button system of any framework or page builder in existence. This lesson will show you how to:
- Apply button styles to links or button elements
- Apply button style variants (dark and light)
- Apply the outline variant
- Make outline buttons the default
- Set global styles (shared styles) for all buttons
- Apply neutral, black, and white styles
- Customize any variant
- Create a gradient button
- Style third party buttons and links
- Create a completely custom button
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco - บันเทิง
![ตีสิบเดย์ [FULL] | คู่รักแซฟฟิก "หลิงหลิง-ออม" จากซีรีย์ "ใจซ่อนรัก"](http://i.ytimg.com/vi/zs8AfphGn2w/mqdefault.jpg)
From teaching the difference between the intents of a link and a button to the flexibility and power of the framework, this is just another example of Kevin's willingness to educate and the power of ACSS. Thank you!
This new ACSS layout is beyond perfect. I'm serious about what I do and with ACSS and the new layout and all your training, this is by far the best thing I have ever experienced in the world of WordPress.
🙏🙏🙏
With every video that drops I get better and better 🤯
Labelling ACSS a CSS utility framework doesn't give it justice! Its much more than that and on a completely different level compared to other wordpress frameworks out there. Hats off 🎩
The button system is much more powerful in v3 than I expected. Great job to the team once again!
Another great episode with powerful features, well done Kevin !
For Me, this are the best source of learning.
As always - great product, great lesson, great teacher - Thank You Kevin
Yet another great episode in the series and great overview of how ACSS can make "button" life easier.
The tips I've been learning in these latest tutorials are great, and I truly appreciate how you've made my work not only easier but actually more enjoyable!
So happy with this framework. Amazing!
Who would have thought there is so much to buttons in ACSS? amazing! thanks for this excellent guide. Consistently innovating and improving on the best CSS Framework on the planet is a testament to all the hard work yourself and your team does. I also spotted with my beady little eyes you were using 3.0.0 😋
I can't imagine what the ACSS 201 course will entail 😍
ACSS isn't just a framework. ACSS is a powerful utility that empowers web design. Excellent tutorial!
Thanks!
Brilliant, super versatile options but for me I love the simplicity of setting up a couple of colours globally styled and your done.
wowww! so many tricks in here! amazing
Brutally insane! 😍🤯
I didn't expect much from this video about buttons to be honest as it seemes pretty straightforward to me, but there's a lot to see !
@26:03 : that's where the magic happens
Preach brother!!!
Super video Kevin 👍
I lurve the custom button idea. The amount of flexibility it brings is jaw dropping.
dude you're a machine! these are great, thanks.
Am already using much of this but still found the video really helpful in reinforcing my understanding. One small gripe I have with buttons is that we have to put a class on every 'yellow button' we create. It would be great if ACSS could auto style the default Bricks Button to Primary for example
Yeah, that would be great. Unfortunately bricks uses too much specificity in their default styles. If we override that it causes a lot of issues down the line.
Gradient buttons?? My eyes! 🫥🤢🤮
Loving these features! An issue though: I'm not getting btn--primary-light showing up in my utility class list. Only btn--primary. I can add btn--primary-light manually but it ends up just being a non-locked custom class. However it does work still. The button gets the primary light styling (confirmed both visually and in Chrome inspector). I am on v3.0.0-rc-2. All variants are enabled under Primary button options.
Same issue, either it doesnt shown btn--neutral
Same issue
Deactivate and reactivate ACSS. Did you upgrade from 2.x?
Either way just add it manually and lock it if need be. It’s inconsequential. The code is in the stylesheet.
@@AutomaticCSS I deactivated and reactivated ACSS. No difference. I upgraded from v3.0.0-rc-1 (I've never used 2.x. rc-1 was the initial install). If I set it manually will it not collide with the utility class name when it shows up when the issue is resolved?
@@robmaric I've confirmed these are missing from auto-suggest. I've added them in the next update.
🔥
hey Kevin, am I able to override any style outside ACSS using this technique you showed with Facets? Or this works just with buttons?
I’m not sure what you mean. Do you a specific example?
@@AutomaticCSS Sure. I'm actually migrating a Wordpress install where I use Learndash LMS (with the shitty Elementor) and I would use Bricks + ACSS.
They have lots of customs CSS and specificities and I was wonder if I could override, for example, their default navigation links (breadcumbs) or grids with any of ACSS classes, using Global SCSS and recipes like you did with WP Grid Box Facets.
Usually that stuff just requires custom css because the styles are so specific. But when doing your custom css you can use ACSS variables where needed.
Buttons are buttons so we can prepackage the code in things like mixins and recipes.
22:29 What happened? 🤔Why the purple screen?
I think that is some sort of mouse cursor spotlight feature. Windows has something similar.
Missed the "button" stylling in main navigation in header.
@automaticCSS: When does the video for that will come?
Not sure what you mean? Can you clarify?
@@AutomaticCSS
If a Button (CTA) needs to be at the "End" of Main-Navigation in Header. I remember that Kevin told somewhere, not to use a separate button, instead do CSS with last navigation item.
Now better understandable?
@@joachimauster yes, you can target the last link in the menu and use the btn() mixin.
@@AutomaticCSS
Found the video randomly, that I remembered:
th-cam.com/video/GPhBhQNRA28/w-d-xo.html
Do you mean this video (found now randomly) and the methods in it with what you call "Mixin"?
Or is "Mixin" a different method, if yes, where can I find the relevant video on how to use it correctly?
Using your specificity inspection example, where you multiplied the class to increase the specificity, given what the inspector reveals, how many times would I know to repeat the class?
The number tells you.
(0,2,0) is two classes, so you’d need three. Or you could win with 0,2,1 by adding an element reference.
I looove the the mixin thing for 3rd party buttons. Will that approach work for form input fields too?
It should work for unsupported form systems for buttons. There are no input mixins currently, but it’s probably a good idea.
Which is the right way to customize the background of the hover for each button? Right now is black and I can't find in the ACSS where to put. Should I change in Bricks in the .btn-primary ecc?
Click the arrow next to the background color in the automatic CSS dashboard. That’s how you set hover styles
I asked in the inner circle, but never got an answer, so will ask here...
Now that your colour naming fits more in line with Bricks button drop-down naming for buttons (primary, secondary, dark, light etc), can you please add the button styles so they can be controlled by the Bricks button settings: primary, secondary… outline switch… size… etc.. without having to add ACSS classes to each button.
seems a lot like having to repeat myself to add a button to a page, that is a Primary button already, to only then have to add a class (or multiple classes) to make it use ACSS styling.
Should be able to drop a default button (primary) and it be styled already please. Then make it an outline with the button styling switch… or make it a secondary button… etc… and of course, I understand that using classes for light and dark variants would still be needed. Thanks 👍
Bricks has to fix their specificity issues for that to work. Also, we can’t cater to how every single builder chooses to do things. Too much overhead and too much maintenance load.
If the builder did things more efficiently we could do it.
@@AutomaticCSS there's other builders?? 🤪
awesome!!! Just one question: the recipes do not work on my end. Do I have to activate it somewhere?
We need more details. We can help you in the support community.
Is there still a bricks Ui style guide to download? I added this to my remote templates and nothing showed. Would be helpful in seeing all the variations without having to re-create my own Ui guide.
We have to build a new style guide, which we cant' invest time in until 3.0 official is released.
just.. wow O_O
I tried using a mixin for changing link colors but it seems @include link(primary) isn't recognized, is it ?
Where did you see a link mixin? Not sure this has ever been a thing. What’s the use case?
@@AutomaticCSS I was just trying to change the color of the active wpgridbuilder pagination item because it's blue out of the box. I ended up using a line of custom css for targeting the active page + a link utility class for the non active page.
oh is that what a button element is for 🤦♂