A good first building block

Button with a focus ring

A small button with hover, pressed and visible keyboard focus states.

HTMLCSSNo dependencies

Live preview

Explore the result below

HTML

<button
  class="action"
  type="button"
  >
  Make something
</button
>
<p class="hint">Press Tab to see the focus ring.</p>

CSS

:root {
  font-family: system-ui, sans-serif;
  color: #35235c;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #f1eafa;
}
.action {
  border: 0;
  border-radius: 14px;
  padding: 18px 26px;
  background: #7145b6;
  color: white;
  font: 600 17px system-ui;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}
.action:hover {
  background: #593397;
  transform: translateY(-2px);
}
.action:active {
  transform: translateY(0);
}
.action:focus-visible {
  outline: 3px solid #35235c;
  outline-offset: 5px;
}
.hint {
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .action {
    transition: none;
  }
}

JavaScript

// No JavaScript needed for this example.

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #35235c;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #f1eafa;
}
.action {
  border: 0;
  border-radius: 14px;
  padding: 18px 26px;
  background: #7145b6;
  color: white;
  font: 600 17px system-ui;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}
.action:hover {
  background: #593397;
  transform: translateY(-2px);
}
.action:active {
  transform: translateY(0);
}
.action:focus-visible {
  outline: 3px solid #35235c;
  outline-offset: 5px;
}
.hint {
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .action {
    transition: none;
  }
}
</style>
</head>
<body>
<button
  class="action"
  type="button"
  >
  Make something
</button
>
<p class="hint">Press Tab to see the focus ring.</p>
<script>

</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

A styling example: the button does not submit a form or trigger an action. The focus ring is visible when using a keyboard.

Troubleshooting and limits

This button demonstrates styling and intentionally performs no action. Use Tab and Shift+Tab to check the focus ring. Add a click action only when its purpose is clear; preserve reduced-motion styling and do not remove the focus outline.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going