Button Component

Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons are a quite frequent occurance in most websites such as in e-commerce sites for buying an item or adding an item to the cart, in social media sites to follow or connect with someone or as call-to-action element in most fo the sites. Various types of buttons are as follows:

1. Basic button- text, contained, outlined

2. Icon button

3. Link Button: Used to navigate to pages within a website or onto some other website.

4. Floating action button: A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

1. Basic button:

TEXT

            
                <a href="#" class="button-text">TEXT</a>
                <a href="#"><button class="button-contained">CONTAINED</button></a>
                <a href="#"><button class="button-outlined">OUTLINED</button></a>

2. ICON BUTTON:

Add to Cart Delete

            
                <a href="#" class="button-contained add-to-cart-button"><i class="fa-solid fa-cart-arrow-down"></i>Add to Cart</a>
            
                <a href="#"class="button-contained delete-button"><i class="fa-solid fa-trash"></i>Delete</a>
                
                <a href="#"><i class="fa-solid fa-paper-plane"></i></i></a>
                
                <a href="#"><i class="fa-solid fa-bookmark"></i></a>

3. LINK BUTTON:

Primary Link Secondary Link

            
                <a href="#" class="primary-link-btn">Primary Link</a>
            
                <a href="#" class="secondary-link-btn">secondary Link</a>

4. FLOATING ACTION BUTTON:

            
                <a href="#" class="floating-action-button flex-center circle">+</a>

Components

Button