Create Our Own CSS Frameworks part-5

What Will I Learn?

• Make Button
• Make Flexible Color
• Create Button Variations

Requirements

• Intermediate CSS
• Basic SASS
• Watch tutorial part1, part2, part3, and part4

Difficulty

• Intermediate

Tutorial Contents

Make Button

Buttons are very important in user interaction on our website. We will make our own button. The first step that we should do we must create a default button.

• Default Button
  Before we create a button, we should create a variable to store the size of the font and the base color of the default button.

Why we must declaration variable?

When we build CSS frameworks, we have to think flexibly so that our CSS can be modified easily, so we must save important properties that we can change the value at any time. so if there is a change we do not need to change it one by one. we only need to change the variable where the property is stored

Variable declaration:

$font-default: 14px
$grey: #bebebe

• $font-default: This the name of variable and the 14px is the value of font size. You can change the value you want.
• $grey: This the name of variable and the #bebebe is the value of hexa color. You can change the color and change the variable name but keep relevant with the name of the variable.

SASS :

.button
    font-size: $font-default
    border: 1px solid $grey
    background: white
    padding: 10px
    border-radius: 5px
    &:hover
        cursor: pointer
        color: white
        background: $grey

• .button: This is the class name we will use for the button .
• border: 1px solid $grey: Because we have declared the variable. we can use it like this.
• &:hover: We can use hover effect like this &: hover, and write down the css under &: hover.

HTML:

<button type="button" class="button">Default</button>

We can use the class .button in the element < button >.

Result:

Button Default

Button Default Hover

Create button variations

To create some button variations. we need to use variables to store the values of each variable.
I will create 3 background colors to represent the button type.

• type success: background-color #73c000
• type warning: background-color #ffe249
• type danger: background-color #ba3838

Variable declaration:

$success: #73c000
$warning: #ffe249
$danger: #ba3838

SASS:

.success
    background: $success
        color: white
.warning
    background: $warning
        color: white
.danger
    background: $danger
        color: white

• .success: This is the class name that we will use in the element < button >. and the value we save in variable $success.
• .warning: This is the class name that we will use in the element < button >. and the value we save in variable $warning.
• .danger: This is the class name that we will use in the element < button >. and the value we save in variable $danger.
• color: white: The color of text in button is white.

HTML:

<button type="button" class="button success">Success</button>
<button type="button" class="button warning">Warning</button>
<button type="button" class="button danger">Danger</button>

We can add a class with the class name class="button classname" we have created in SASS.

Result:

Create button size variations

Button size variation is also an important thing. we will make the size into 2 types.

• type small: font-size 14px
• type large: font-size24px

Variable declaration:

$large: 24px
$small: 14px

SASS:

.small
    font-size: $small
.large
    font-size: $large

• .small: This is the class name that we will use in the element < button >. and the value we save in variable $small.
• .large: This is the class name that we will use in the element < button >. and the value we save in variable $large.

HTML:

<button type="button" class="button large">Large</button>
<button type="button" class="button small">Small</button>

We can add a class with the class name class="button classname" we have created in SASS.

Result:

We have made the element button become more flexible and can be modified easily in the future. you can adjust the color or size of your own button. Hopefully this tutorial useful for you. Thank you.

Curiculum

• CSS Frameworks part-1
• CSS Frameworks part-2
• CSS Frameworks part-3
• CSS Frameworks part-4

---

Posted on Utopian.io - Rewarding Open Source Contributors

---