Full-Width Link Button Using CSS

Making a full-width link button using CSS ensures that the clickable area spans the entire width of its container.

To make a full width link button using CSS, you can use the display: block; or width: 100%; property in CSS.

Below is a basic example of how to create a full-width link button:

</>
Copy
/* Full-width link button */
a.full-width {
  display: block;
}

Examples

Example 1. Simple Full-Width Link Button

In this example, the link spans the entire width of its parent container, making it a full-width button.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.full-width {
      display: block;
      text-align: center;
      background-color: #007BFF;
      color: white;
      padding: 15px;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div>
    <a href="https://www.example.com" class="full-width">Click Me</a>
  </div>
</body>
</html>

Output:

Conclusion

Using CSS, you can easily create full-width link buttons by setting display: block and width: 100%. This technique is useful for making call-to-action buttons more prominent, especially on mobile devices.