Button Group Display

INFORMATION & CODE

Button Group Display

What the Code Does

This code provides a clean, modern implementation for displaying styled button groups on a webpage using semantic HTML and CSS. It showcases two variations: a default monochromatic button group and a multi-colored button group. Each group merges four individual buttons together into a single, cohesive segmented control with rounded outer edges and a tactile, 3D press effect.

How the Code Works

The HTML structure consists of a standard document containing header elements (<h1> and <h2>) and two .btn-group containers. Inside each container are four <button> elements holding the text labels. The CSS uses modern layout and styling techniques, notably CSS Grid (display: grid; grid- template-columns: repeat(4, 1fr);), which automatically divides the container evenly into four columns with zero gap between them, making the buttons seamlessly touch each other.

The styling uses pseudo-classes like :nth-of-type and :active to create interactive visual feedback. The first and last buttons in each group receive border-radius properties to round the outer corners of the combined group, while the inner buttons retain sharp edges for a unified look. Furthermore, applying box-shadows and CSS transforms (translatey) gives the buttons a physical, clickable "push-down" animation when a user interacts with them.

How to Use the Code

To use this code, you simply need to copy the HTML markup into the <body> section of an HTML file and place the CSS rules either inside a <style> tag within the HTML <head> or into an external styles.css file linked in the document. You can easily customize the button text, add more buttons by adjusting the grid columns, or modify the hex color codes in the CSS to match your website's specific color palette.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Button Group Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 class="title">BUTTON GROUP DISPLAY</h1>
    <h2 class="subtitle">Default Button Group</h2>

    <div class="btn-group">
      <button class="button">CLICK</button>
      <button class="button">THIS</button>
      <button class="button">BUTTON</button>
      <button class="button">GROUP</button>
    </div>

    <h2 class="subtitle">Multi-Coloured-Button Group</h2>

    <div class="btn-group">
      <button class="button-colour">CLICK</button>
      <button class="button-colour">THIS</button>
      <button class="button-colour">BUTTON</button>
      <button class="button-colour">GROUP</button>
    </div>
  </body>
</html>

CSS


                      h1.title,
      h2.subtitle {
        color: #ff7000;
        text-shadow: 1px 1px #ffffff, 2px 2px #ffffff, 3px 3px #ff7000;
        text-align: center;
      }

      .btn-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        width: 100%;
        max-width: 600px;
        padding: 20px 20px 27px 20px;
        margin: auto;
        background: #f5f5f5;
        border: 2px solid #aaaaaa;
        border-radius: 20px;
      }

      .button,
      .button-colour {
        background: #c9c9c9;
        border: none;
        color: #000000;
        padding: 15px 20px;
        text-align: center;
        text-decoration: none;
        font-family: "Courier New", monospace;
        font-size: 14px;
        font-weight: bold;
        opacity: 0.7;
        cursor: pointer;
        box-shadow: 0 7px #aaaaaa;
      }

      .button:nth-of-type(1),
      .button-colour:nth-of-type(1) {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      .button:nth-of-type(4),
      .button-colour:nth-of-type(4) {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      .button-colour:nth-of-type(1) {
        background: #ff0000;
        box-shadow: 0 7px #dd0000;
      }

      .button-colour:nth-of-type(2) {
        background: #ffff00;
        box-shadow: 0 7px #dddd00;
      }

      .button-colour:nth-of-type(3) {
        background: #0077ff;
        box-shadow: 0 7px #0055dd;
      }

      .button-colour:nth-of-type(4) {
        background: #00dd00;
        box-shadow: 0 7px #00bb00;
      }

      .button:active {
        opacity: 1;
        box-shadow: 0 3px #aaaaaa;
        transform: translatey(4px);
      }

      .button-colour:nth-of-type(1):active {
        opacity: 1;
        box-shadow: 0 3px #dd0000;
        transform: translatey(4px);
      }

      .button-colour:nth-of-type(2):active {
        opacity: 1;
        box-shadow: 0 3px #dddd00;
        transform: translatey(4px);
      }

      .button-colour:nth-of-type(3):active {
        opacity: 1;
        box-shadow: 0 3px #0055dd;
        transform: translatey(4px);
      }

      .button-colour:nth-of-type(4):active {
        opacity: 1;
        box-shadow: 0 3px #00bb00;
        transform: translatey(4px);
      }

MENU

INFORMATION & CODE