buttons

text button

text

                
                <button class="btn-txt txt-primary txt-md pd-xs txt-ucase">
                    text
                </button>
                
            

solid button

solid

                
                <button class="btn-solid txt-md pd-xs txt-ucase bg-secondary txt-secondary">
                    solid
                </button>
                
            

outlined button

outlined

                
                <button class="btn-outlined b-solid b-secondary txt-ucase txt-md pd-xs">
                    outlined
                </button>
                
            

text with icon button

delete delete

                
                <button class="btn-solid txt-secondary bg-secondary flx flx-center txt-ucase pd-xs txt-md">
                    <span class='material-icons'>
                        delete
                    </span>
                </button>
                
            

icon button

alarm

                
                <button class="btn-solid txt-secondary bg-secondary pd-xs flx flx-center brd-full">
                    <span class='material-icons'>
                        alarm
                    </span>
                </button>
                
            

button css

                
                    /* text button */

                    .btn-txt {
                        border-style: none;
                        background: transparent;
                    }
                    
                    .btn-txt:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    
                    /* solid button */
                    
                    .btn-solid {
                        border-style: none;
                    }
                    
                    .btn-solid:hover {
                        cursor: pointer;
                        background: var(--clr-off-secondary);
                    }
                    
                    /* outlined button */
                    
                    .btn-outlined {
                        background: transparent;
                    }
                    
                    .btn-outlined:hover {
                        cursor: pointer;
                        color: var(--clr-off-secondary);
                        border-color: var(--clr-off-secondary);
                    }
                    
                    /* button full width */
                    
                    .btn-width-full {
                        width: 100%;
                    }