How to get same styling for normal button and blog-Button (read more button) - Support

Hi,

i added a animated style to a button, which works well:

/* Basisstil für alle Buttons */
.avia-button, .avia-button.avia-size-small, .avia-button.avia-size-large {
    display: inline-flex; /* Flexbox für zentrierten Inhalt */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    font-weight: 800; /* Fettschrift */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 2px solid #ff3366; /* Rahmenfarbe */
    padding: 0.95rem 2.5rem; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    line-height: 1; /* Zeilenhöhe */
    border-radius: 100px; /* Abgerundete Ecken */
    color: #ffffff !important; /* Schriftfarbe Weiß */
    font-family: 'Montserrat', sans-serif; /* Schriftart */
    letter-spacing: 0.25px; /* Buchstabenabstand */
    text-transform: uppercase; /* Großbuchstaben */
    background-color: #ff3366; /* Hintergrundfarbe */
    position: relative; /* Für die Animation */
    overflow: hidden; /* Inhalt begrenzen */
    transition: all 300ms ease-in-out; /* Sanfter Übergang */
}

/* Stil für den Text und die Pfeile */
.avia-button span {
    display: inline-flex; /* Flexbox für Text und Pfeile */
    align-items: center; /* Vertikale Zentrierung */
    transition: transform 300ms ease-in-out; /* Sanfte Bewegung */
}

/* Stil für die Pfeile */
.avia-button span::after {
    content: ">>"; /* Pfeile */
    opacity: 0; /* Unsichtbar im Standardzustand */
    position: absolute;
    color: #ffffff; /* Pfeile in Weiß */
    font-size: 1rem;
    font-weight: 800;
    left: 100%; /* Start direkt rechts neben dem Text */
    margin-left: 1ch; /* Zwei Leerzeichen Abstand */
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

/* Hover-Effekt für den Text */
.avia-button:hover span {
    transform: translateX(-1ch); /* Text verschiebt sich leicht nach links */
}

/* Hover-Effekt für die Pfeile */
.avia-button:hover span::after {
    opacity: 1; /* Pfeile werden sichtbar */
    transform: translateX(0); /* Pfeile bleiben an ihrer Position */
}

Now i’m trying to have the same effect on the read more button from the blog, but it seems not to work properly.
What am i missing here?

kind regards

Jak

December 8, 2024 at 1:57 pm #1473183

Mike

Moderator

Hey Jak73,
When I check it seems to be working:

I’m not sure that I see a difference:

Best regards,
Mike

December 8, 2024 at 3:47 pm #1473186

Hi Mike,
that’s right, it looks very similar, but i’m trying to get the same animation, but on the blog-page – for any reason – the smooth move of the text to left (with the hover), does not work for the blog page?
Any idea?
kind regards
Jak

December 8, 2024 at 5:32 pm #1473187

Mike

Moderator

Hi,
It looks like the css above is not what you are using for the read more buttons, as they don’t have the “avia-button” class.
The two buttons don’t have the same structure.

Best regards,
Mike

December 9, 2024 at 7:22 am #1473214

with a slightly edited postslider.php as child-theme element you can have this DOM Structure:

lines 876ff

$permalink = '<div class="read-more-link"><a href="' . get_permalink( $the_id ) . '" class="more-link"><span class="read-more-text">' . __( 'Read more', 'avia_framework' ) . '</span><span class="more-link-arrow"></span></a></div>';
$prepare_excerpt = ! empty( $entry->post_excerpt ) ? $entry->post_excerpt : avia_backend_truncate( $entry->post_content, apply_filters( 'avf_postgrid_excerpt_length', $excerpt_length ), apply_filters( 'avf_postgrid_excerpt_delimiter', ' ' ), '…', true, '' );

then it might be possible to have the same effect and a flex will make sense.

December 9, 2024 at 7:27 am #1473215

Good morning Guenni,
thanks for your reply!
So i’ll copy postslider.php, replace lines at 876 and load it into my child-theme folder, right?
kind regards
Jak

December 9, 2024 at 12:26 pm #1473232

try it – if it does not work ;) you can delete it afterwards. But default folder for those child-theme ALB elements is “shortcodes”
and if you got this snippet inside your child-theme functions.php they are loaded instead:

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

December 9, 2024 at 12:35 pm #1473233

maybe this is then the way it works:

ok – try now – change to your needs and transition timings:

/*** ===============================***/
/* Basisstil für alle Weiter Lesen "buttons" */
.more-link {
  display: inline-flex !important; /* Flexbox für zentrierten Inhalt */
  flex-flow: row nowrap;
  justify-content: center; /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  font-weight: 800; /* Fettschrift */
  text-align: center !important;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 2px solid #ff3366 !important; /* Rahmenfarbe */
  padding: 0.95rem 2.5rem 0.95rem 2rem !important; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  line-height: 1rem; /* Zeilenhöhe */
  border-radius: 100px !important; /* Abgerundete Ecken */
  color: #ffffff !important; /* Schriftfarbe Weiß */
  font-family: 'Montserrat', sans-serif; /* Schriftart */
  letter-spacing: 0.25px; /* Buchstabenabstand */
  text-transform: uppercase; /* Großbuchstaben */
  background-color: #ff3366; /* Hintergrundfarbe */
  position: relative; /* Für die Animation */
  overflow: hidden; /* Inhalt begrenzen */
  transition: all 300ms ease-in-out; /* Sanfter Übergang */
  width: auto !important;
}

/* Stil für den Text und die Pfeile */
.more-link span {
  display:  inline-flex; /* Flexbox für Text und Pfeile */
  flex: 0 1 auto;
  transition: all 700ms ease-in-out; /* Sanfte Bewegung */
  padding: 0px;
}

.more-link:hover span {
  padding: 0 3px;
}

/* Stil für die Pfeile */
.more-link .more-link-arrow::after {
  content: ">>"; /* Pfeile */
  font-family : inherit;
  opacity: 0; /* Unsichtbar im Standardzustand */
  visibility: hidden;
  position: absolute;
  top: 14px;
  right: 0.5ch;
  color: #ffffff; /* Pfeile in Weiß */
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
  transition: all 700ms ease-in-out;
}

/* Hover-Effekt für die Pfeile */
.more-link:hover .more-link-arrow::after {
  visibility: visible;
  opacity: 1; /* Pfeile werden sichtbar */
 
}

.more-link:hover .read-more-text {
  transform: translateX(-1ch); /* Text verschiebt sich leicht nach links */
}

December 9, 2024 at 12:41 pm #1473234

see: https://webers-testseite.de/blog/

December 9, 2024 at 6:23 pm #1473273

Hi Guenni,
thank you very much i’ll try it now.

Just for my understanding:
i create a new folder with “shortcodes” in child-theme folder.
Then i change postslider.pho at line 876ff and upload it to child-theme>shortcodes.
Than i add the other code to my function.php child-theme, right?
kind regards
Jak

December 9, 2024 at 9:19 pm #1473284

https://kriesi.at/documentation/enfold/intro-to-layout-builder/#customization

This is a real good docu – unfortunately, there is too little research being done here

PS : above there are the two lines listed ( 876 and 877 newest Enfold 6.0.8) – but only the 876 has been changed .
but i guess it is easier to replace that little block of those two lines.

December 10, 2024 at 8:12 am #1473296