How To Change The Design of Buttons

  • 8 February 2018
  • 1 reply
  • 419 views

This one's for all you button fanatics out there. What should your buttons look like and how should they respond to mouseovers and clicks? The power is in your hands.
 

How To Change The Design Of Buttons

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Buttons 
  3. Configure the basic settings that apply for all buttons:
    1. Border radius
    2. Border width
    3. Font weight
    4. Text styling (lowercase or uppercase)
  4. Find the button you want to change and click the title to reveal its settings
  5. Click Default, Hover, Click to select which button state you want to configure
    1. For background, text and border color provide color in HEX or RGBa format; use ‘transparent’ if you want to have a transparent background.
    2. For button shadow provide an RGBa code, x-axis, y-axis, and radius, leave empty if you don’t want a shadow.
  6. Click Publish

Note: 

  • When you make changes you will get a live preview directly in the Buttons mode and in the page.
  • The toggle button consists of 2 states: inactive and active. Don’t use the same styling for both states.

Tip: Set Button color to ‘Transparent’ and Border width to at least ‘1px’ to create outline buttons. See the 4th button in the image above.

 

Button examples:

ecc325c8-87dd-4f23-a364-61a480f1d5e4.jpg


1 reply

Hi @Frank

I'm currently editing the buttons for our community. For the toggle buttons I want to set the background color to transparent. However when I copy the transparent text from your topic in the background color default field for the button it is set back to the hex code that is set for this field. 

So my question is how can I add the transparent color to a color field for a button? 

For example:

This image shows the configuration we now use
When I paste '’transparent'’ in the field.
After clicking outside the field, the color is changed back to the current color

Hope you can help me. :slight_smile:

Reply