Skip to content
Related Articles

Related Articles

Pure CSS Active Buttons

View Discussion
Improve Article
Save Article
  • 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 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!