Gradient Buttons by admin

1 Add to Favorites

HTML Code
CSS Code

.custom-button {
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  position: relative;
  border: solid 2px transparent;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #1d2b64, #03a9f4) border-box;
  border-radius: 10px;
}

.custom-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
}

.custom-button:hover {
  background: linear-gradient(90deg, #1d2b64 0%, #03a9f4 100%);
  cursor: pointer;
}

.custom-button .button-text {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  background: linear-gradient(90deg, #1d2b64 0%, #03a9f4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.custom-button .button-text-black {
  font-size: 18px;
  line-height: 21px;
  color: #000000;
}

.custom-button:hover .button-text {
  background: unset;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.custom-button:hover .button-text-black {
  color: #fff;
}

.custom-button .button-icon {
  color: #1d2b64;
}

.custom-button:hover .button-icon {
  color: #fff;
}

.custom-button-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  border-radius: 10px;
  gap: 6px;
  background: linear-gradient(90deg, #1d2b64 0%, #03a9f4 100%);
  border: 2px solid transparent;
}

.custom-button-fill:hover {
  position: relative;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #1d2b64, #03a9f4) border-box;
  cursor: pointer;
}

.custom-button-fill:hover::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d2b64 0%, #03a9f4 100%);
}

.custom-button-fill .button-fill-text {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: #fff;
}

.custom-button-fill:hover .button-fill-text {
  background: linear-gradient(90deg, #1d2b64 0%, #03a9f4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.custom-button-fill .button-fill-icon {
  color: #fff;
}

.custom-button-fill:hover .button-fill-icon {
  color: #1d2b64;
}

Uploaded: 13th July 2024

Tags: #linear, #gradient, #hover, #border

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 20 CSS properties used in the above example. Click to view and learn about each property.

align-items justify-content padding position border background border-radius content top right bottom left z-index cursor font-weight font-size line-height color display gap

HTML Tags Used

There are 6 HTML Tags used in the above example. Click to view and learn about each tag.

html body div button span br