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

Learn how to create stunning custom buttons with CSS in our comprehensive documentation. Dive into the code and discover techniques for styling buttons, including gradient backgrounds, rotating animations, and precise text formatting. Elevate your design skills and master the art of button customization with our step-by-step guide.


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
  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.


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 –

Leave a Reply

Your email address will not be published. Required fields are marked *