Pure CSS Primary Buttons

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

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

Article Tags :

CSS

Web Technologies

Pure CSS