Buttons

A graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes.

Check out Our Custom Buttons styles with support for multiple sizes,states and easy Customization by users.

Default Button

Scratch includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control

To use buttons with scratch button is the base class for all the buttons and all the other button layouts can be created by adding their respective classes.


                    <button type="button" class="button button-blue text-bright">Blue</button>
                    <button type="button" class="button button-green text-bright">Green</button>
                    <button type="button" class="button button-yellow text-dark">Yellow</button>
                    <button type="button" class="button button-red text-bright">Red</button>
                    <button type="button" class="button button-bright text-dark">Bright</button>
                    <button type="button" class="button button-dark text-bright">Dark</button>

You can customize these by adding your own CSS class in your code.

Bread Button


                                <button type="button" class="button button-blue button-bread">Blue</button>
                                <button type="button" class="button button-green button-bread">Green</button>
                                <button type="button" class="button button-yellow button-bread">Yellow</button>
                                <button type="button" class="button button-red button-bread">Red</button>
                                <button type="button" class="button button-bright button-bread">Bright</button>
                                <button type="button" class="button button-dark button-bread">Dark</button>

Display Bread buttons by adding button-bread after default button class .

Example class ="button-yellow button-bread

Outline Button

Button that are composed to display in dark background.


                                            <button type="button" class="button button-blue-out text-blue">Blue</button>
                                            <button type="button" class="button button-green-out text-green">Green</button>
                                            <button type="button" class="button button-yellow-out text-yellow">Yellow</button>
                                            <button type="button" class="button button-red-out text-red">Red</button>
                                            <button type="button" class="button button-bright-out text-bright">Bright</button>
                                            <button type="button" class="button button-violet-out text-violet">Violet</button>

Inverted Button

Formatted for display in dark background.


                                                        <button type="button" class="button button-blue-inv">Blue</button>
                                                        <button type="button" class="button button-green-inv">Green</button>
                                                        <button type="button" class="button button-yellow-inv">Yellow</button>
                                                        <button type="button" class="button button-red-inv">Red</button>
                                                        <button type="button" class="button button-bright-inv">Bright</button>
                                                        <button type="button" class="button button-violet-inv">Violet</button>

The Outline and Inverted buttons can also be displayed as bread button by just adding the classbutton-bread


                                                                    <button type="button" class="button button-blue-out text-blue button-bread">Blue</button>
                                                                    <button type="button" class="button button-green-out text-green button-bread">Green</button>
                                                                    <button type="button" class="button button-yellow-inv button-bread">Yellow</button>
                                                                    <button type="button" class=" button button-red-inv button-bread">Red</button>

Neon Button


                                                                    <button type="button" class="button button-blue-neon text-bright">Blue</button>
                                                                    <button type="button" class="button button-green-neon text-bright">Green</button>
                                                                    <button type="button" class="button button-bright-neon text-dark">Bright</button>
                                                                    <button type="button" class="button button-yellow-neon text-dark button-bread">Yellow</button>
                                                                    <button type="button" class="button button-red-neon text-bright button-bread">Red</button>
                                                                    <button type="button" class="button button-violet-neon text-bright button-bread">Violet</button>

Sizes

Scratch provides you with additional size control of the buttons !!

Large button

Add button-large to increase the size of the button.


                    <button type="button" class="button button-blue text-bright button-large">Blue</button>
                    <button type="button" class="button button-green text-bright button-large">Green</button>

Small button

Add button-small to decrease the size of the button.


                    <button type="button" class="button button-blue text-bright button-small">Blue</button>
                    <button type="button" class=" button button-green text-bright button-small">Green</button>

LOADING...