Digital Marketing Agency Using Elementor | WordPress 2024

866SHARES

Animation Pulse CSS

Animation Pulse CSS Class

animation-pulse

Animation Wobble CSS

.animation-wobble{
  position: relative;
  animation: animation-wobble 3s linear infinite alternate;
}

@keyframes animation-wobble {
  0%   {transform: translateY(10px);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(10px);}
}

Animation Wobble CSS Class

animation-wobble

Mouse Animation CSS

.mouse-animation{
    position: relative;
    animation: mouse-animation 3s linear infinite alternate;
}
@keyframes mouse-animation {
  0%   {transform: translateY(2px);}
  50% {transform: translateY(-2px);}
  100% {transform: translateY(2px);}
}

Mouse Animation CSS Class

mouse-animation

Circle Animation CSS

.circle-animation{
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Circle Animation CSS Class

circle-animation

Background Glass Effect CSS

.bg-glass-effect{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

Background Glass Effect CSS Class

bg-glass-effect

Button Gradient Border CSS

.elementor-button,.blog-post .jkit-meta-readmore a{
    position: relative;
}

.elementor-button::before,.blog-post .jkit-meta-readmore a::before {
content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 1px; 
  background:linear-gradient(90deg,#20D9A1,#5F39FF); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
}

Service Icon Box CSS

.service-box .service-icon .elementor-widget-container{
        transition: all .3s;
    }
.service-box:hover .service-icon .elementor-widget-container{
        background-color: transparent;
        background-image: linear-gradient(180deg, #20d9a1 0%, #5f39ff 100%);
    }

Service Icon Box CSS Classes

service-box
service-icon

Team Member Hover Effect CSS

.image-wraper-item{
        transform: scale(0);
        transition: transform  0.5s;
    }
.image-wraper:hover .image-wraper-item{
        transform: scale(1);
    }

Team Member Hover Effect CSS Classes

image-wraper
image-wraper-item

Service List CSS

.service-list svg{
        position: relative;
        top: 10px;
    }
    .elementor-icon-box-title{
        transition: all 0.3s;
    }
    .service-list:hover .elementor-icon-box-title{
        color: #5F39FF !important;
    }
    .service-list:hover .elementor-icon{
        fill: #5F39FF !important;
    }
    
    .circle{
        height: 350px;
        width: 350px;
    }

Service List CSS Class

service-list
circle

Blog Post CSS

.blog-post .by{
    margin-right: 5px;
}

Blog Post CSS Class

blog-post