Building better buttons

I have been asked since my first article about the buttons. With such a seemingly simple thing it is hard to imagine that buttons could be an issue for people. But the power of QuickBase also leaves some knowledge shortfalls. Since you don't have to be a programmer, you may not know about the power that is inside QuickBase. You can use QuickBase to make a cohesive environment and it starts with classes. Most items on a web page contain a id, and a class, in this case we are going to use the class. <a class="Vibrant" href="example.com">Test Button</a>, the class is what tells css, cascading style sheet, instruction on what you want items on a webpage to look like. The classes we are focusing on are Vibrant, Alert, Danger, Primary, Snowy, Success. 

Combining Vibrant and Danger, "Vibrant Danger" will produce a red button. 

All the classes start with Vibrant, including the base class of Vibrant, a gray button with blue text. I have created a sample that will build the code, but it is good to understand the code. 

The Link: https://wegelectric.quickbase.com/db/bmge7mh5p?a=nwr

Once you learn to build your button, you can start adding more controls, like a button bar, which can be done by adding button code blocks to a list.

List("&nbsp;",
    "<a class='Vibrant'>Vibrant</a>",
    "<a class='Vibrant Alert'>Vibrant Alert</a>",
    "<a class='Vibrant Danger'>Vibrant Danger</a>",
    "<a class='Vibrant Primary'>Vibrant Primary</a>",
    "<a class='Vibrant Snowy'>Vibrant Snowy</a>",
    "<a class='Vibrant Success'>Vibrant Success</a>"
)

This would produce a list with a space in between each button "&nbsp;" is html for space. You can also have conditionals, which will allow you to show buttons off of certain criteria.

If("Me" = "Danger",
    "<a class='Vibrant Alert'>Vibrant Alert</a>",
    "<a class='Vibrant'>Vibrant</a>"
)