On this Webflow lesson we take a look at combo classes. How to create buttons using combo classes in Webflow and the difference between inline vs display block elements on Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys.
So let's start stylizing adding some of
the color swatches that we have from our
Figma system, I'm going to start pulling out
these primary colors, we can use the code
panel and just pull out the colors from there.
And I can select any element here I'm just
gonna select playground and I'm not
gonna change any color here, just want to
start adding some swatches, so I'm just
gonna select and paste, I'm gonna paste
the text color.
Cool, so let's just go back to the color we
had originally, the original dark slate.
So now we know for sure we have this
nice colors here, so out of these tones
we can actually come up with some
interesting gradients.
So the first button I wanna create is
this simple button.
It's very important that you identify
which elements from your library
are going to be done via code and
which ones are going to require you
to export specific asset, for example this
button right here of Google, this image
is not possible with CSS alone, or with
code, so you'll have to export this
image as an SVG but for these ones
you'll notice when you click on any
of these buttons you have a
background-linear class, so all this
code that you don't need to worry
about, it can be generated by Webflow.
The only thing we need to do is add
those settings, those property settings
in our Webflow so let's do the first
one.
All right so what I've done it's Ive
created a class called button and we
are gonna start changing some of the
values that, most of these buttons will share.
If we go back to Figma, and we select one
of the buttons of the design we can see
right away that I have this created as
an auto layout.
The auto layout has some spacing on
the sides of 30px and 12 on the vertical.
If you actually select option, click
on option key, you can just move
the values from the left and right
So this would be 30...
and then select option again and just the
top, so this would be 12.
And inside notice we have these
gradients so you can start adding
and changing kind of the values
right from there.
But the problem with this is that
you are adapting, your changing
the values to the actual class button,
but we will probably have all sorts
of buttons, different type of buttons,
so we have a button that has this
gradient, we have an orange gradient,
and we even have this nice kind of
blue-ish dark tone gradient.
So because there is 3 types of buttons
even comparing over here, this 3 types
of buttons need to use, they share the
same spacing and they share the same
shadow, but they don't share the same
color of the background.
So, let's go ahead and make sure that
the button does not affect the color,
instead we are gonna create something
called combo class.
A combo class is just an additional class
that you add on top of the original
class to change some of the secondary
properties, so in this case I could say:
"Ok, this could be the primary color"
So this is going to be button and this
is gonna be our primary button.
This is gonna be our secondary button
and this is gonna be our third button.
Whatever properties I'm changing now,
is gonna affect the primary class, not
the button class, and we can simply click
on this little inheriting selectors,
and notice now we have two, you
can go back to each one of this.
So, if you go back to button you
have access to those properties
but if you go back to primary you
now have the ability to start changing
the properties of that combo class.
So let's add a gradient by simply
clicking on the + icon and then
selecting the type "linear gradient,
and what we are going to do is
select from the colors over here,
on this color spectrum, we are gonna
select the color blue that we have,
the primary and we are gonna do the
same thing with the secondary node
and call that secondary magenta color.
And the cool thing about this is that
it gives us this little angle wheel where
we can start playing around where we
want that linear to start from, and
end from.
In this case if we were trying to match
the same over here, we know it
starts magenta, then it goes into
blue, and it's slightly into an angle,
so we can do that just by simply
swapping that out like that and, just
around there I think that looks good.
So we just created a button which
has properties for the spacing and
we created a combo class which
specifically changes the linear gradient.
Another thing that they all share
is the roundedness, they all have
a border radius of 5px, I wouldn't
add it in primary because I know
primary is only taking care of the
actual background color.
What I wanna do is go back to the
selector and select the button selector
so this original class and we are going
to go over to borders, and in the
borders we are gonna see the radius,
so the border radius is going to be
5px, so that it matches same properties
that we have on all buttons.
So this drop shadows right here that
I've added if you go back in here we have
multiple drop shadows so for example
the first drop shadow we know it's
13px on the Y axis, it has a blur of 14px
and it's 20% opacity, simply opening
on Webflow the effects property panel
we can add a box shadow, so the angle is
going to be about... straight down, just
straight down and we want this
property to be about 2px or 3 of the
opacity. So lets take this down to 25
and boom... we just created that shadow
similar to how we have it on our settings.
I personally think that this is a bit too
much, on the web, there might be some
slight differences, but we can start adding
multiple drop shadows also in Webflow.
This is our first drop shadow, so I wanted
just simply have this be maybe 10 and 10
so it's not so expanded downwards.
...change that to 10.
All right, let's add another one and
this one we are gonna try to match
the second one we have here, so the
second one is only 3 or 4px and the
blur is about 3 and it's similar to that,
so let's do 3, 3 make sure this is 180
right directly below it, and make sure
that the opacity is over here, we can
move this lighter down as well, to change
the opacity level, and just like that we
created a style of box shadows to that
button class.
What we are gonna do now is just duplicate
this, I'm gonna copy the button simply
by copying and pasting it, and I just
removed this combo class and right
away I can see that all these buttons
that I have here are sharing the same
class called button, so think about
this how symbols and components
work on Figma, how styles work in Figma
so, you have the same style called button
and it's been applied throughout but on
top of that style you can have combo styles
that can change some additional
properties like the background color.
Now remember the box model, we talked
about how boxes stack on top of each
other, how come in this particular case
this are not stacking on top of each other.
Well, the reason why is because every
button by default on Webflow is created
as Display Inline-block so what it does
it just behaves like inline and adapts
itself to whatever the properties content
it's inside, so if for example I change
this button to say: HELLO THIS IS A
BUTTON, whatever it contains inside
it's gonna adapt itself and expand based
on this inline-block style, but what
happens if we were to turn this button
class into a display Block?
Immediately display Block turns the whole
element to expand to the width of the
parent which in this case is playground.
So this is the different types of blocks
and that's why is important to understand
the difference, this one is a display Block
and then the default is by Webflow is
created as a display Inline-block, it kind
of aligns in line into other elements.
So we are gonna see a lot of this into
other lessons and how we apply both
inline and display Block, so let's just
finalize here by adding some of the
secondary combo classes.
So this one is gonna be secondary,
and the secondary is gonna use a
background linear gradient, similar
to what we did but this one is going
to use the orange.
And comparing over here, we have
different types of orange, so we can
pull out the colors from our Figma
and look out for... ok this one is this
yellow, I think we already added it.
And then there is a darker kind of
red-ish tone, so we wanna copy that,
and bring it over here.
We don't have that as a swatch but
we could added... Just like that
let me just add this one, the color tomato
it's interesting the naming
and let's change the same idea here,
we have that gradient starting from the
top right like that.
So that looks good.
Great, now that we have kind of our based
styles, we have heading ones we have
paragraphs, we have quotes and we have
buttons.
Now we need to think about how we can
establish these buttons for a bright screen
or a bright white background and a
dark background.
In order for us to do this with the
minimal amount amount of classes
we wanna create a contrast class so
let's jump in a start doing that in Webflow.
Over here I am just going to duplicate
playground and I am gonna copy that
and paste it but with this playground
now that we understand how combo
clases work we can actually change
this background to something that
says dark mode or dark right.
So, we know that playground and
the combo class dark is gonna use
a different background color.
So I'm going to select the color over
here and use the dark color.
We wanna make sure that the color
that we are using is actually going
to be readable, so what we can do
is: on the dark you can simply
change the color value of the typography
to color white.
And just like that our combo class
playground dark is turning everything
that's inside of it completely white.
For now I just want you to have a clear
understanding of how combo clases work
and the ability for us to have a nice
playground to access all of our styles
that we have created.
Over here we have our style manager
and we can see that we have styled
All Body pages, All H1s, All paragraphs,
All quotes, we have a class called
playground inside it we have a combo
class called dark.
And just the same, looking at this
the tree and the hierarchy of classes
works the same as the Navigator,
things start to stack and align with
parents and children within each of
these sections.
But this is just the starting point for us
to start referencing our styles and
using and utilizing them in our design.
Let's go ahead and jump in to our
next class which is going to start
looking at the structure of the website.
I'll see you there.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS