Estils CSS

Elementor: Botó, en fer hover puja una mica i posa ombra

Al següent codi tenim en compte, per ordre:
1. Widget Button (Elementor v3)
2. Widget Button (Elementor v4 – atom elements)
3. Botó del formulari d’Elementor (formulari v3)

				
					.elementor-widget-button a,
.e-button-base,
.elementor-field-type-submit .elementor-button{
  transition: transform 0.3s ease, box-shadow 0.5s ease;
}
.elementor-widget-button a:hover,
.e-button-base:hover,
.elementor-field-type-submit .elementor-button:hover
{
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
				
			

L’element fa efecte float pujant i baixant indefinidament

				
					.animate-float {
  animation: animateFloat 5s ease-in-out infinite;
}
@keyframes animateFloat {
  0% {
    transform: translateY(0px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.12);
  }
  100% {
    transform: translateY(0px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }
}
				
			

text-wrap: balance

Equilibra la llargada de les línies. Ideal per a títols.

				
					h1, h2, h3 {
    text-wrap: balance;
}
				
			

Aquest és un títol llarg amb text-wrap balance. Aquest és un text-wrap balance. Aquest és un títol llarg amb text-wrap balance

text-wrap: pretty

Millora la llegibilitat dels paràgrafs evitant salts de línia poc naturals i paraules orfes.
No deixarà una paraula sola a la última linia

				
					p {
    text-wrap: pretty;
}
				
			

Aquest paràgraf té l’estil aplicat i no deixarà una paraula sola al final del text. Provant un dos tres.

Aquest paràgraf no té l’estil aplicat i deixa una paraula sola al final del text. Provant un dos tres.