INFORMATION & CODE
Big Button Focus Display
What the code does
This code creates a "Big Button Focus Display" webpage containing a black panel with an orange border, an orange heading, and two large, stylized red buttons. The buttons are designed to look like physical arcade or machine buttons mounted inside metal-colored holders. When a button receives focus, its appearance changes from red to bright green, it moves slightly downward, and a green glowing effect appears around it. The overall design uses CSS to create the three-dimensional appearance; the behavior visible here is primarily controlled by HTML and CSS.
How the HTML works
The document begins with , which tells the browser that the page uses modern HTML5. The <html lang="en/US"> element contains the entire webpage. The lang attribute is intended to identify the language of the document; normally, lang="en-US" would be used for American English.
Inside <head>`, the <meta charset="UTF-8">` element tells the browser to use UTF-8 character encoding. This allows the page to correctly display a wide range of characters. The viewport <meta>` element makes the page responsive on mobile devices by setting the page width to the device's screen width and using an initial zoom level of 1.
The <title>` sets the browser tab title to "Big Button Focus Display." The first <link> loads an external CSS file called >styles.css. This means the CSS shown in your question would normally be saved in a file named styles.css in the same folder as the HTML file.
The second <link> loads two Google Fonts, Press Start 2P and VT323. These fonts could be used elsewhere in the page's CSS, although the CSS shown here does not actually apply either font to an element. The <script> in the <head> loads Font Awesome from a CDN. Again, the CSS/HTML shown does not currently use any Font Awesome icons.
Inside the <body>, the main <div>` has the .button-container class. This acts as the outer panel that contains the heading and buttons. The <h1>` displays "BIG BUTTON FOCUS." Each button has the .btn class, which allows CSS rules to style both buttons in the same way.
The elements called .top-button-mount and .bottom-button-mount are decorative elements. They create the grey, metallic-looking shapes behind the buttons. Each actual <button> is positioned between these decorative elements to make it appear as though the button is mounted into a physical panel.
How the CSS works
The universal selector * applies box-sizing: border-box to every element. This changes how the browser calculates an element's width and height. With border-box, the specified width includes the element's padding and border, making sizing easier to control.
The body rule gives the overall webpage a very light grey background using #f9f9f9. The .button-container creates the main black panel. It is positioned relatively and moved 30 pixels downward using top: 30px. Its width is 100%, but max-width: 600px prevents it from becoming wider than 600 pixels. The padding provides 30 pixels of horizontal space inside the panel, while margin: 0 auto 30px auto centers the panel horizontally and gives it 30 pixels of bottom margin.
The panel has a black background and an 8-pixel double orange border. This creates the appearance of a framed control panel. The max-height: 670px limits its height, although because the content can potentially exceed that height, max-height does not necessarily guarantee that all content will fit inside the panel.
The h1 rule makes the heading orange and centers it. The text-shadow adds a small white shadow offset by 2 pixels horizontally and 1 pixel vertically. This contributes to the retro/arcade appearance.
The .top-button-mount and .bottom-button-mount rules create the grey shapes behind each button. Both are 210 pixels wide and 106 pixels high, with rounded corners created by border-radius: 50px. Their grey gradients create a metallic appearance.
The linear-gradient() functions gradually transition between different shades of grey. For example, the top mount uses #dddddd, white, and #bbbbbb, giving the impression of a reflective metal surface. The borders add a darker outline around the mounts.
The position: relative combined with top and left moves the mounts from their normal positions. left: 50% moves the element's left edge to the center of its containing element. The transform: translatex(-50%) then moves the element back by half its own width, effectively centering it.
The rest of the transform is:
```css
rotatex(-30deg) skew(-2.5deg);
```
Note: rotateX() creates a perspective-like tilt around the horizontal axis, while skew() slightly distorts the shape. Together, these make the mounts appear somewhat three-dimensional.
The .bottom-button-mount is similar but is positioned much farther down using top: 100px. It also uses slightly different shades of grey, which helps distinguish the upper and lower parts of the button assembly.
How the buttons work
The .button-container button selector targets every <button>` inside .button-container. The buttons are given position: relative, allowing them to be moved with top. The top: -135px moves each button upward so that it overlaps the decorative mounting elements.
Each button is 200 pixels wide and has 14 pixels of padding. Its background is initially bright red:
```css
background-color: rgb(255, 50, 50);
```
The border is also red and is 10 pixels thick. border-radius: 46px gives the button strongly rounded corners, making it look more like a large physical push button than a conventional rectangular HTML button.
The text is 24 pixels in size and bold. The text-shadow gives the text a small black shadow.
One of the most important properties is box-shadow. The button has several shadows layered together:
```css
box-shadow:
0 10px #cc0000,
inset 1px 1px 10px #aa0000,
inset -1px -1px 10px #ffaaaa;
```
The first shadow appears below the button and makes it look raised from the surface. The two inset shadows are drawn inside the button. One provides a darker red area, while the other provides a lighter red highlight. Together they create a pseudo-3D effect without needing an image.
The button uses the same transformation technique as the mounts:
```css
transform: translatex(-50%) rotatex(-30deg) skew(-2.5deg);
```
This centers the button and gives it the same angled appearance as the surrounding mount.
The transition-duration: 0.2s makes changes to the button's appearance happen over 0.2 seconds rather than instantly. This makes the focus effect look more like a physical button being pressed.
What happens when a button receives focus
The most important part of the CSS is the button:focus rule. :focus is a CSS pseudo-class that applies when an element has keyboard focus or has otherwise been focused by the browser
.When the user clicks a button, or navigates to it using the keyboard, the button can become focused. At that point, the normal red appearance is replaced by the styles inside:
```css
.button-container button:focus
```
The button changes from red to bright green:
```css
background-color: rgb(0, 255, 0);
border: 10px solid rgb(0, 255, 0);
color: #00ee00;
```
Its shadow also changes dramatically. Multiple green shadows create a glowing effect around the button:
```css
0 0 20px #00ff00,
0 0 30px #00ff00,
0 0 40px #00ff00
```
The button is also moved downward by 9 pixels using:
```css
translatey(+9px)
```
This works together with the existing horizontal translation, rotation, and skew:
```css
transform:
translatex(-50%)
translatey(+9px)
rotatex(-30deg)
skew(-2.5deg);
```
The result makes the button look as though it has been physically pushed down. Because the button has a transition-duration of 0.2s, the movement and visual changes happen smoothly.
How to use the code
To use this example, create a folder containing three files: index.html and styles.css. Put the HTML code into index.html, the CSS into styles.css.
The HTML file's reference:
```css
```
You can then open index.html in a web browser. You should see the black/orange control panel and the two red buttons. Click a button, or use the Tab key to move keyboard focus between the buttons. When a button receives focus, it should turn green, glow, and move downward.
You can create additional buttons simply by adding another button element:
```css
```
Because the CSS targets all buttons inside `.button-container`, the new button automatically receives the same styling and focus effect.
One thing to note is that the two buttons and their mounting elements are laid out using relative positioning and large positive/negative top values. This is useful for creating this particular visual arrangement, but it is somewhat fragile for responsive layouts. If you wanted to turn this into a larger interface with many buttons or support a wide range of screen sizes, using Flexbox or CSS Grid would generally make the layout easier to maintain. The core button effect works with ordinary HTML and CSS alone
HTML
CSS