Farbverlaufsrahmen um einen Button in Elementor

Kleiner kurzer Tipp um einen Button ein wenig vom herkömmlichen Design abheben zu lassen. Statt der üblichen Rahmen, könnt ihr als Hover-Effekt einen glühenden Rahmen mit Farbverläufen erstellen.

Was ihr dafür benötigt, ist lediglich ein wenig CSS.

Button mit Verlaufsahmen

So geht’s. Erstellt einfach einen Button. Stellt die Schriftfarbe ein und gebt dem Button einen Rahmen. Eine Hintergrundfarbe müsst ihr nicht vergeben. Das passiert später im CSS Code.

Wenn der Button erstellt und designt ist, fügt folgenden CSS Code im Erweitert Tab des Buttons unter Eigenes CSS ein. Anbei der Code:

selector{
    --btn-width: 250px; /* Button Breite */
    --btn-height: 75px; /* Button Höhe */
    --btn-background: white; /* Button Hintergrundfarbe*/
    --left-gradient: #fec5f3; /* Farbe links */
    --right-gradient: #92003B; /* Farbe rechts */
}
selector a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}
selector a:before,
selector a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 2s; /* die Dauer, bis der Rahmen erscheint 1s = 1 Sekunde 0.5s = halbe Sekunde usw */
}
selector a:nth-child(1):before,
selector a:nth-child(1):after {
  background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
selector a:hover:before {
  inset: -3px;
}
selector a:hover:after {
  inset: -3px;
  filter: blur(10px);
}
selector a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}