Open In App

Pure CSS Active 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 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=
        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

Pure CSS Active Buttons

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


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