How to Create a Gym & Fitness Landing Page By Using Elementor Free | WordPress 2025

3.5KSHARES

Hide horizontal overflow for the entire page CSS

Title Background Effect Style Css

.mix-blend-mode{
    mix-blend-mode: difference;
}

Title Background Effect Style Css

mix-blend-mode

Fire Animation Style Css

.fire-bg img {
    animation: flameWobble 6s infinite linear;
}

@keyframes flameWobble {
    0%{
        filter:blur(2px);
         opacity: 0;
    }
   
    10%{
        filter:blur(0px);
    }
     20%{
       
         opacity: 1;
    }
  100% {
    transform: scale(1,1.2) translate(0, -30px) rotate(-2deg);
      opacity: 0;
  }
}

.delay-6s img{
    animation-delay: .6s;
}

Fire Animation Style Css Class

fire-bg
delay-6s

Marquee Style Css

.marquee-content .elementor-widget-container {
    display: flex
;
    width: 5000px;
    transform: translateX(0);
    animation: marquee 30s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

.marquee-right .elementor-widget-container {
    animation-direction: reverse;
}

@keyframes marquee{
    100% {
    transform: translateX(-2000px);
}
}

Marquee Style Css Classes

marquee-content
marquee-right

Background Object Animation Style Css

.hero{
     animation:bg 150s linear  infinite !important;
}
.bg-change-animation{
    animation:bg 100s linear  infinite !important;
}

@keyframes bg{
    to{
        background-position-y: 1000px;
    }
}

Background Object Animation Style Css Classes

hero
bg-change-animation

Button Style Css

 
.btn-orrange .elementor-button{
    overflow:hidden !important;
    position: relative;
  z-index: 0;
}

.btn-orrange .elementor-button:before, .btn-orrange .elementor-button:after,
.btn-orrange .elementor-button .elementor-button-content-wrapper:before,
.btn-orrange .elementor-button .elementor-button-content-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #040202;
  transition: all .5s ease;
  z-index:-1;
}
.btn-orrange .elementor-button:before {
  transform: translate(-100%, -100%);
}
.btn-orrange .elementor-button:after {
  transform: translate(-100%, 100%);
}
.btn-orrange .elementor-button .elementor-button-content-wrapper:before {
  transform: translate(100%, -100%);
}
.btn-orrange .elementor-button .elementor-button-content-wrapper:after {
  transform: translate(100%, 100%);
}

.btn-orrange .elementor-button:hover:before {
  transform: translate(-49%, -49%);
}
.btn-orrange .elementor-button:hover:after {
  transform: translate(-49%, 49%);
}
.btn-orrange .elementor-button:hover .elementor-button-content-wrapper:before {
  transform: translate(50%, -50%);
}
.btn-orrange .elementor-button:hover .elementor-button-content-wrapper:after {
  transform: translate(50%, 50%);
}

Button Style Css Class

btn-orrange

Contact Section Gradient Background Style CSS

.join-us::before{
    background: linear-gradient(0deg, #040202 -8.92%, rgba(4, 2, 2, 0.812341) 13.55%, rgba(4, 2, 2, 0.8) 16.43%, rgba(4, 2, 2, 0) 53.64%, rgba(4, 2, 2, 0) 75.66%, rgba(4, 2, 2, 0.96) 98.36%) !important;
}

Contact Section Gradient Background Style CSS Class

join-us

Service Item Hover Style Css

.service-item:hover .hover-content {
   transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.hover-content {
   transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

Service Item Hover Style Css Classes

service-item
hover-content

Counter Style Css

.count-wrapper .elementor-icon-box-icon .elementor-icon svg {
    height: fit-content;
}


.count-wrapper{
backdrop-filter: blur(15px);

}

Counter Style Css Classes

count-wrapper

Membership Section Background Style Css

.membership {
    animation: bg2 200s linear infinite forwards;
}

@keyframes bg2{
    100% {
    background-position-X: 2000px;
}
}

Membership Section Background Style Css Classes

membership

Membership Pricing Plan Hover and Button Style Css Classes

.membership-btn .elementor-button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.membership-btn {
    height: 100%;
}

.membership-btn .elementor-button-wrapper {
    height: 100%;
}



.membership-details ul.elementor-icon-list-items li.elementor-icon-list-item span.elementor-icon-list-icon svg {
    transition: all .4s linear !important;
}
.membership-details ul.elementor-icon-list-items li.elementor-icon-list-item:hover span.elementor-icon-list-icon svg {
    transform: rotate(45deg);
}

Membership Pricing Plan Hover and Button Style Css Classes

membership-details
membership-btn