Streaming live at 10am (PST)

Different button styles


#1

I'm having trouble creating different button styles within the same design across multiple pages.

I'm finding that the same button style is being applied each time I create a button, however when I change the class ie 'new button' I loose the ability to edit the buttons body. Also if I change or move the existing button it effects where the button is placed and the size of it on other pages.

I read on the form that you can style a link block however I can't figure out how to style the body section to get it to look like a button.

Can someone help out?

Thanks!


#2

I'm not sure If I understood your question correctly, but...

Create a button and apply a class, e.g. awesome-button to it. Change its style to whatever width, height, shadow, hover effect etc you want. When you're done with your basic button simply add another class to it e.g. red and apply new style, like fill color etc smile You can have 5 buttons with awesome-button class and each button can have another class that stands for a color.

You can see that in Question #1 on my just-created page smile
site :: http://forumhelp.webflow.com/#1
troubleshooting :: click me

To clarify, I'll post CSS for buttons I've created smile

.q1-button-base {
  margin-right: 10px;
  margin-left: 10px;
  padding: 10px 15px;
  border: 2px solid #de6d40;
  border-radius: 10px;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}
.q1-button-base:hover {
  box-shadow: black 0px 0px 2px 0px;
}
.q1-button-base.q1-red {
  background-color: #db5656;
}
.q1-button-base.green {
  background-color: #78c75d;
}
.q1-button-base.blue {
  background-color: #4eaeed;
}
.q1-button-base.yellow {
  background-color: #f7cd59;
}

Duplicate css parameters
#3

Thanks that worked. I didn't realise applying a separate class alongside the button class would solve the problem.

Thanks!


#4

Glad I could help wink


#5