Open In App

Pure CSS Primary Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class.

Pure CSS Primary Buttons Class:

  • pure-button-primary: This class is used to create the primary action button. his class is used alongside “pure-button” class.

Syntax:

  • Create a Primary Button using <a> Tag:

    <a class="pure-button pure-button-primary" href="#">
    Primary Button
    </a>
  • Create a Primary Button using <button> Tag:

    <button class="pure-button pure-button-primary">
        Primary Button
    </button>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
          integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous">
</head>
  
<body style="text-align: center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>Pure CSS Primary Buttons</h3>
       
    <!-- Primary button using a tag -->
    <a class="pure-button pure-button-primary" href="#">
        Primary Button 1
    </a>
    
    <!-- Primary button using button tag -->
    <button class="pure-button pure-button-primary">
        Primary Button 2
    </button>
</body>
  
</html>


Output:

Pure CSS Primary Buttons

Pure CSS Primary Buttons

Reference: https://purecss.io/buttons/#primary-buttons



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads