Buttons

In this design system I use arrows as links or buttons, and for secondary button it is arrow inside the colored box for additional attention.

Normal

Use arrow links to indicate the additional information available / MORE

Buttons are used for indicating actions / SEND

Hover

Use arrow shift to the rifht to indicate responcive behavior

Innactive

Use saturated background and arrow to indicate innactive sate of the arrow and button.

Accessibility Considerations

Arrows used to direct users to the desired page. Hover action is indicated by the movement of the arrow forward. Keep the contrst for acessability and visibility.


Code Example Primary

      
        <div class="StyleButton__container"> </div>
            <a href="#" class="text-decoration-none"> </a>
                <svg data-bbox="9 70.9 181 59" xmlns="http://www.w3.org/2000/svg" width="150" height="60" viewBox="0 0 200 200">
                <path d="M159 70.9l-2.2 2.4L183.6 99H9v3h174.6l-26.2 25.3 2.1 2.6 30.5-29.3-31-29.7z"> </path>
                </svg>

Code Example Secondary

          
         <div class="StyleButton__box_in">
            <a href="#" class="text-decoration-none">   
              <svg data-bbox="9 70.9 181 59" xmlns="http://www.w3.org/2000/svg" width="150" height="50" fill="#6f6f6f"viewBox="0 0 200 200">
              <path d="M159 70.9l-2.2 2.4L183.6 99H9v3h174.6l-26.2 25.3 2.1 2.6 30.5-29.3-31-29.7z"></path>
              </svg>
         </div>