Grupos de botones de CSS puro

Los botones son uno de los elementos de interfaz de usuario más comunes. Para crear un grupo de botones, use la clase «pure-button-group» y agregue los botones con el número que desee con la ayuda de la clase «pure-button». También puede activar el botón utilizando la clase «pure-button-active».

Clases de grupos de botones de CSS puro:

pure-button-group: Esta clase se utiliza para crear un grupo de botones.

Sintaxis:

<div class="pure-button-group" role="group">
    <button class="pure-button ">pure button 1</button>
    <button class="pure-button ">pure button 2</button>
    <button class="pure-button ">pure button 3</button>
</div>

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
        "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1 >Geeksforgeeks</h1>
        <strong>
            Pure CSS Buttons Groups
        </strong>
        <br /><br />
  
        <div class="pure-button-group" role="group">
  
            <!-- Active button -->
            <button class="pure-button pure-button-active">
                HTML
            </button>
            <button class="pure-button ">CSS</button>
            <button class="pure-button">Data Structure</button>
            <button class="pure-button">Algorithms</button>
        </div>
    </center>
</body>
  
</html>

Producción:

Pure CSS Button Groups

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
    "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <strong>
            Pure CSS Buttons Groups
        </strong>
        <br /><br />
  
        <div class="pure-button-group" role="group">
            <button class="pure-button ">C++</button>
            <button class="pure-button ">Java</button>
  
            <!-- Active button -->
            <button class="pure-button pure-button-active">
                Python
            </button>
        </div>
    </center>
</body>
  
</html>

Producción:

Pure CSS Button Groups

Publicación traducida automáticamente

Artículo escrito por sahilsulakhe3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta