ACSS 101.10: All Things Buttons (Styles, Variants, Mixins, Recipes, & Custom Buttons)

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

[@mmaayta82]

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 🎩

[@stphnmwlkr]

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!

[@whatznext28]

With every video that drops I get better and better 🤯

[@alexander-van-aken]

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.

[@AutomaticCSS]

🙏🙏🙏

[@andredkvideo]

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!

[@LupusDesign]

ACSS isn't just a framework. ACSS is a powerful utility that empowers web design. Excellent tutorial!

[@davidwalls2304]

Yet another great episode in the series and great overview of how ACSS can make "button" life easier.

[@antonichristian5845]

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 😋

[@konnected37]

I can't imagine what the ACSS 201 course will entail 😍

[@MusicJunkieVideos]

Brilliant, super versatile options but for me I love the simplicity of setting up a couple of colours globally styled and your done.

[@AndreSalata]

wowww! so many tricks in here! amazing

[@noe.galarza]

Brutally insane! 😍🤯

[@jcdeaton42]

The button system is much more powerful in v3 than I expected. Great job to the team once again!

[@eucalyptech]

Another great episode with powerful features, well done Kevin !

[@quickend01]

As always - great product, great lesson, great teacher - Thank You Kevin

[@AmandaLucaseu]

Super video Kevin 👍

[@velocitytechsolutions]

For Me, this are the best source of learning.

[@dahunsi]

I lurve the custom button idea. The amount of flexibility it brings is jaw dropping.

[@ceescoenen]

So happy with this framework. Amazing!

[@Louis-C-online]

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

[@lumpbelly]

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

[@AutomaticCSS]

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.

[@robmaric]

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

[@TheMaxiviper117]

Same issue

[@AutomaticCSS]

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.

[@robmaric]

​@@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?

[@AutomaticCSS]

@@robmaric I've confirmed these are missing from auto-suggest. I've added them in the next update.

[@BrendanOConnellWP]

dude you're a machine! these are great, thanks.

[@thorsten-roever]

Thanks!

[@johnpixle]

Preach brother!!!

[@Simon-sly]

Fantastic. Hopefully it's possible to 'programatically' change the button color automatically depending if it's on a light or dark background?

[@derekshort]

Gradient buttons?? My eyes! 🫥🤢🤮

[@OfficinadelpixelIt]

Awesome as usual (but) one thing I asked myself many times is: is there a list of those recipes? I saw some very interesting one in other videos too but I can't understand how many they are and where to find them

[@AutomaticCSS]

They’re in the cheat sheet and now in the docs

[@AndreSalata]

hey Kevin, am I able to override any style outside ACSS using this technique you showed with Facets? Or this works just with buttons?

[@AutomaticCSS]

I’m not sure what you mean. Do you a specific example?

[@AndreSalata]

@@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.

[@AutomaticCSS]

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.

[@SamFrysteen]

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 👍

[@AutomaticCSS]

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.

[@SamFrysteen]

@@AutomaticCSS there's other builders?? 🤪

[@michaelvandinther]

🔥

[@jmcbade2960]

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?

[@AutomaticCSS]

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.

[@robmaric]

I looove the the mixin thing for 3rd party buttons. Will that approach work for form input fields too?

[@AutomaticCSS]

It should work for unsupported form systems for buttons. There are no input mixins currently, but it’s probably a good idea.

[@derekshort]

22:29 What happened? 🤔Why the purple screen?

[@Tom-Homer]

I think that is some sort of mouse cursor spotlight feature. Windows has something similar.

[@joachimauster]

Missed the "button" stylling in main navigation in header. @automaticCSS: When does the video for that will come?

[@AutomaticCSS]

Not sure what you mean? Can you clarify?

[@joachimauster]

@@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?

[@AutomaticCSS]

@@joachimauster yes, you can target the last link in the menu and use the btn() mixin.

[@joachimauster]

@@AutomaticCSS Found the video randomly, that I remembered: kzbin.info/www/bejne/fYHLc5uHg7d0aJo 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?

[@jeffhall5431]

They way I did it was, I gave the menu item a class as explained in the original video. I targeted the anchor tag of that class and applied a btn() mixin in Global SCSS. I was using a header from Frames, so specificity came into play just like the example given in the video for the 3rd party button.

[@ElementoryMyDearWatson]

How are you positioning the ACSS dashboard to the left of the bricks elements panel? When I move mine to the edge of either side of the bowser it covers the structure or elements panel

[@AutomaticCSS]

There’s a pin icon at the top when you dock it to the side.

[@bjoernzosel]

awesome!!! Just one question: the recipes do not work on my end. Do I have to activate it somewhere?

[@AutomaticCSS]

We need more details. We can help you in the support community.

[@mangakagirl97]

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?

[@AutomaticCSS]

Click the arrow next to the background color in the automatic CSS dashboard. That’s how you set hover styles

[@jonjon5342]

Please Help! In the brick's form Submit button - how to make Automatic css drive that... cause they have their own Primary Secondary etc stylying and the Submit button only sees those styles and the automatic css ones.. ??

[@jonjon5342]

nm figured it out (apply the form class to the form!)

[@peterwyro9365]

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.

[@AutomaticCSS]

We have to build a new style guide, which we cant' invest time in until 3.0 official is released.

[@konnected37]

just.. wow O_O

[@Louis-C-online]

I tried using a mixin for changing link colors but it seems @include link(primary) isn't recognized, is it ?

[@AutomaticCSS]

Where did you see a link mixin? Not sure this has ever been a thing. What’s the use case?

[@Louis-C-online]

@@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.

[@starmap]

oh is that what a button element is for 🤦‍♂

[@joxmanyou]

Good ideas, but they lead you to lock yourself in the world of automatic.css. If you want to find work as a web developer, I think this steers you away from anything other than ACSS. I have LTD licenses from ACSS and Frames. I know the answer is to learn ACSS, standard CSS, Tailwind CSS and not close any doors to yourself...

[@AutomaticCSS]

🤔