Open In App

Pure CSS Primary Buttons

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
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=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
          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://pure-css.github.io/#primary-buttons


P

ppatelkap
Improve
Article Tags :

Explore

Lightbox