Pure CSS Primary Buttons

Last Updated : 30 Jan, 2022

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>