Buttons

man creating a new Website

Helpful
signs

Cool! Ich habe ein komplettes Theme (Lhotse) für den Bricks Builder gefunden.
Soweit ich weiß, wurde es ursprünglich für die Version 1.6 erstellt.
Inzwischen hat sich mit Bricks 1.12.4 allerdings einiges geändert, sodass das Template nicht ohne Anpassungen sofort lauffähig ist.
Außerdem möchte ich diese Gelegenheit nutzen, um den Bricks Builder besser kennenzulernen und gleichzeitig eine möglichst barrierefreie Webseite erstellen.

Also: Let’s have a try!

Anpassen der Button Eigenschaften

An dieser Stelle wollte ich die Button Eigenschaften verstehen und auch gleichzeitig die Farben dazu anpassen, da mir das Grün nicht gefallen hat

Vorher

}
%root%:hover::before{
opacity:1;
  transition: all 2s ease-in-out;
}
%root%:hover::after{
visibility:hidden!important;
  transition: all 1s ease-in-out;
}
 
%root%::after{
content: “;
  visibility:visible;
    position: absolute;
    width:100%;
  height:100%;
  background:linear-gradient(90deg, #72a266, #6fac62);
    top: 50%;
 
    left: 50%;
  transform:translateX(-50%) translateY(-50%);
 
    z-index:-1;
    border-radius: 5em!important;
  animation: move 4s infinite ease-in-out;
  transition: all 5s ease-in-out;
 
}
@keyframes move {
  50%, 100% {
      width:120%;
    height:150%;
    opacity: 0;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
}
@keyframes left-right {
 
  0% {
    transform: translateX(0px);
 
  }
  50% {
    transform: translateX(4px);
 
  }
    100% {
    transform: translateX(0px);
 
  }
}

Nachher

%root% {
background: linear-gradient(90deg, #0077cc, #0055aa);
white-space: nowrap;
transition: all 2s ease-in;
z-index: 2;
}
 
%root%:hover {
transition: all 2s ease-in;
}
 
%root%:hover i {
animation: left-right 2s infinite ease-in;
}
 
%root%::before {
content: “;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(90deg, #005599, #004477);
opacity: 0;
border-radius: 5em;
z-index: -1;
transition: all 2s ease-in-out;
}
 
%root%:hover::before {
opacity: 1;
transition: all 2s ease-in-out;
}
 
%root%:hover::after {
visibility: hidden !important;
transition: all 1s ease-in-out;
}
 
%root%::after {
content: “;
visibility: visible;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #0077cc, #0055aa);
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
border-radius: 5em !important;
animation: move 4s infinite ease-in-out;
transition: all 5s ease-in-out;
}
 
@keyframes move {
50%, 100% {
width: 120%;
height: 150%;
opacity: 0;
}
0% {
opacity: 0;
}
10% {
opacity: 0.4;
}
}
 
@keyframes left-right {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(4px);
}
100% {
transform: translateX(0px);
}
}