Pure CSS Active 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 Active Buttons are used to create an active button that works when the user clicks on the button. The button can be created using <a> and <button> tags.

Pure CSS Active Buttons Class:

pure-button-active: This class is used to create an active button. This class is used along with the “pure-button” class.

Syntax:

Create an active button using <a> Tag:

<a class="pure-button pure-button-active" href="#">
    Active Button
</a>

Create an active button using <button> tag:

<button class="pure-button pure-button-active">
    Active 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 Active Buttons</h3> 

    <!-- Active button using button tag -->

    <button class="pure-button pure-button-active"> 

        Active Button 1 

    </button> 

    <!-- Active button using a tag -->

    <a class="pure-button pure-button-active" href=""> 

        Active Button 2 

    </a> 

</body> 

</html>

Output:

Pure CSS Active Buttons

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

Article Tags :

CSS

Web Technologies

Pure CSS