Family Care Dental Clinic Design System

NAVIGATION

Buttons

Buttons are used to help a user carry out an action, such as starting an application process, or changing the current page, such as submitting a form.

HTML AND CSS Code

HTML CODE

          
            <button class="primaryButton">Primary Button</button>

CSS CODE

          
            .primaryButton{
                background:radial-gradient(white,#69cff9);
                color: black;
                padding: 1rem 3rem;
                font-size: large;
                font-weight: bold;
                border: 1px solid #cbe948;
                border-radius: 0.5rem;
                box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
            }
            .primaryButton:hover{
                background:radial-gradient(#96c789,#69cff9);
                color:black;
            }
            .primaryButton:active{
                background:radial-gradient(white,#69cff9);
                color:#b0b0b1;
            }

HTML AND CSS Code

HTML CODE

          
            <button class="secondaryButton">Secondary Button</button>

CSS CODE

          
            .secondaryButton{
                background:radial-gradient(white,#96c789);
                color: black;
                padding: 1rem 3rem;
                font-size: large;
                font-weight: bold;
                border: 1px solid #cbe948;
                border-radius: 0.5rem;
                box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
            }
            .secondaryButton:hover{
                background:radial-gradient(#69cff9,#96c789);
                color:black;
            }
            .secondaryButton:active{
                background:radial-gradient(white,#96c789);
                color:#b0b0b1;
            }

HTML AND CSS Code

HTML CODE

          
            <button class="tertiaryButton">tertiary Button</button>

CSS CODE

          
            tertiaryButton{
                background:radial-gradient(white,#fac898);
                color: black;
                padding: 1rem 3rem;
                font-size: large;
                font-weight: bold;
                border: 1px solid #cbe948;
                border-radius: 0.5rem;
                box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
            }
            .tertiaryButton:hover{
                background:radial-gradient(#ff6961,#fac898);
                color:black;
            }
            .tertiaryButton:active{
                background:radial-gradient(white,#fac898);
                color:#b0b0b1;
            }

HTML AND CSS Code

HTML CODE

          
            <button class="dangerButton">Danger Button</button>

CSS CODE

          
            .dangerButton{
                background:radial-gradient(white,#ff6961);
                color: black;
                padding: 1rem 3rem;
                font-size: large;
                font-weight: bold;
                border: 1px solid #cbe948;
                border-radius: 0.5rem;
                box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
            }
            .dangerButton:hover{
                background:radial-gradient(#fac898,#ff6961);
                color:black;
            }
            .dangerButton:active{
                background:radial-gradient(white,#ff6961);
                color:#b0b0b1;
            }