Mastering CSS Button Styling: A Comprehensive Guide to Customizing Buttons with Animated Gradient Borders

Introduction

This documentation provides an explanation of the CSS code for customizing a button. The code presented here defines the styling for a button with the class name .my-button. The button is designed to have a gradient background with rotating animation. The code also includes some general styling for the body element.

Table of Contents

1. General Styling for body
2. Styling for .my-button
   • Button Basics
   • Button Background
   • Button Text
3. Animation Keyframes

1. General Styling for body

body {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

This code block sets the background color of the body element to black (#000). It also ensures that the body element takes up the full width and height of the viewport using the width: 100vw and height: 100vh properties. The display: flex property with justify-content: center and align-items: center centers any content within the body.

2. Styling for .my-button

Button Basics

.my-button {
  --border-width: 2px;
  --border-radius: 0.35rem;
  --background-spread: 400px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: -0.02rem;
  position: relative;
  color: #fff;
  border: 0;
  border-radius: var(--border-radius);
  background-color: transparent;
  overflow: hidden;
  padding: var(--border-width);
}

The .my-button class defines the basic styling for the custom button. It introduces several custom properties:

• --border-width: Defines the width of the button’s border (2 pixels).
• --border-radius: Defines the border radius of the button (0.35 rem).
• --background-spread: Defines the spread of the background gradient (400 pixels).

The following properties specify the visual appearance of the button:

• font-family: Sets the font family to Helvetica.
• font-weight: Sets the font weight to bold.
• font-size: Sets the font size to 1.3 rem.
• letter-spacing: Sets the spacing between characters to -0.02 rem.
• position: relative: Sets the button’s position to relative.
• color: #fff: Sets the text color to white.
• border: 0: Removes the border.
• border-radius: var(--border-radius): Sets the border radius to the value of --border-radius.
• background-color: transparent: Sets the background color to transparent.
• overflow: hidden: Hides any content that overflows the button.
• padding: var(--border-width): Sets the padding of the button to the value of --border-width.

Button Background

.my-button::after {
  content: '';
  position: absolute;
  background: conic-gradient(from 90deg at 50% 50%, #A100FFFF 0%, #71C4FFFF 100%);
  top: calc(var(--background-spread) * -1);
  right: calc(var(--background-spread) * -1);
  bottom: calc(var(--background-spread) * -1);
  left: calc(var(--background-spread) * -1);
  z-index: -1;
  animation: 3s rotate linear infinite;
}

This code block creates a pseudo-element (::after) that serves as the button’s background. It applies a conic gradient using the background property. The gradient starts at 180 degrees and consists of two color stops: #A100FFFF and #71C4FFFF.

The following properties are used to position and size the background:

• position: absolute: Positions the pseudo-element absolutely within the button.
• top, right, bottom, left: Sets the top, right, bottom, and left positions of the pseudo-element to spread the background across the entire button.
• z-index: -1: Places the pseudo-element behind the button’s content.
• animation: 3s rotate linear infinite: Applies a 3-second rotation animation named rotate with a linear timing function, causing the background to rotate continuously.

Button Text

.my-button span {
  display: block;
  background-color: #000;
  padding: 0.8rem 2.5rem;
  border-radius: calc(var(--border-radius) - var(--border-width) / 2);
}

The .my-button span selector targets the text content within the button. The following properties are applied:

• display: block: Makes the text a block-level element, allowing for vertical alignment within the button.
• background-color: #000: Sets the background color of the text to black.
• padding: 0.8rem 2.5rem: Sets the padding of the text content.
• border-radius: calc(var(--border-radius) - var(--border-width) / 2): Sets the border radius for the text content, slightly reducing it compared to the button’s overall border radius.

3. Animation Keyframes

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

This code block defines a keyframe animation named rotate. The animation gradually rotates an element from 0 degrees to 360 degrees. The animation is applied to the pseudo-element .my-button::after to create the rotating background effect.

Conclusion

This documentation has provided a detailed explanation of the CSS code for customizing a button with the class .my-button. The code includes styling for the button itself, its background, and the text content. It also incorporates an animation that rotates the background continuously.

Color gradient generator – https://colorgradient.dev/