Get Ready Elementor Templates

How to Make a Freelancer portfolio website (WordPress & Elementor Tutorial for Beginners)

Subscribe To My YouTube Channel For More Upcoming Videos

Buttons’s Shadow Style CSS





 

Buttons’s Shadow Style CSS Class


buttons-shadow

 

Button Gradient Style CSS


.gradient-button .elementor-button {
  position: relative;
  z-index: 1;
  box-shadow: 
    0px 32px 64px 0px rgba(0, 0, 0, 0.075),
    0px 2.15px 0.5px 0px rgba(0, 0, 0, 0.25),
    0px 24px 24px 0px rgba(8, 8, 8, 0.04),
    0px 6px 13px 0px rgba(8, 8, 8, 0.03),
    0px 6px 4px 0px rgba(8, 8, 8, 0.05),
    0px 5px 1.5px 0px rgba(8, 8, 8, 0.05);
  border-radius: 83px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.gradient-button .elementor-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, #F1F1F1 0%, #2D68FF 100%);
  opacity: 0; 
  transition: opacity 0.4s ease; 
  z-index: -1; 
  border-radius: 83px;
}

.gradient-button .elementor-button:hover::after {
  opacity: 1;
}

.gradient-button .elementor-button-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  transition: fill 0.3s ease; 
}

.gradient-button .elementor-button:hover .elementor-button-icon svg {
  fill: none !important; 
}

 

Button Gradient Style CSS Classes


gradient-button
elementor-button-icon

 

Icon Section Style CSS


.icons-section {
  position: relative;
  box-shadow: 0px 32px 64px  rgba(0, 0, 0, 0.075), 0px 2.15px 0.5px rgba(0, 0, 0, 0.25), 0px 24px 24px rgba(8, 8, 8, 0.04), 0px 6px 13px rgba(8, 8, 8, 0.03), 0px 6px 4px rgba(8, 8, 8, 0.05), 0px 5px 1.5px  rgba(8, 8, 8, 0.05);
  border: 1.5px solid transparent;
  border-radius: 12px;
  
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), 
  linear-gradient(180deg, #F6F6F6 0%, #E6E6E6 100%);

    
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.elementor-social-icon {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1) !important;
}

 

Icon Section Style CSS Classes


icons-section
elementor-social-icon

 

Project Section Style CSS


.projects {
   box-shadow: 0px 16px 24px -13px rgba(0, 0, 0, 0.5), 0px 2.15px 0.5px -2px rgba(0, 0, 0, 0.25), 0px 5px 1.5px -4px rgba(8, 8, 8, 0.2), 0px 6px 4px -4px rgba(8, 8, 8, 0.16), 0px 6px 13px rgba(8, 8, 8, 0.12), 0px 24px 24px -16px rgba(8, 8, 8, 0.08), inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}
    
.projects {
  position: relative;
  border-radius: 20px;
  z-index: 1;
  
}

.projects::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 0.5px;
  background: linear-gradient(
    -90deg,
    rgba(253, 253, 253, 0.4) 0%,
    rgba(253, 253, 253, 0.01) 0.01%,
    rgba(253, 253, 253, 0.01) 0.01%,
    rgba(253, 253, 253, 0.1) 10%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.projects-sec {
    max-height: 449px;
    overflow-y: auto;
}

.projects-sec::-webkit-scrollbar {
    display: none; 
}

 

Project Section Style CSS Classes


projects
projects-sec

 

Custom Animated Button Style CSS


.custom-animated-btn .elementor-button-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
}

.custom-animated-btn .elementor-button:hover .elementor-button-icon svg {
    color: #2D68FF;
  fill: none;
}

.custom-animated-btn .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 2;
  margin-bottom: -6px;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.custom-animated-btn .elementor-button:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}


.custom-animated-btn .elementor-button:hover {
  color: #EFF5F2 !important;
  font-weight: 600 !important;
}


.custom-animated-btn .elementor-button::after {
  content: url('https://kitpapa.net/bentolio/wp-content/uploads/2025/04/guidance_up-arrow-1.svg');
  position: absolute;
  right: 18px;
  top: 54%;
  transform: translateY(-50%) translateX(10px);
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 3;
   display: block;
}


.custom-animated-btn .elementor-button:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


.custom-animated-btn .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    to right,
    rgba(253, 253, 253, 0.05) 0%,
    rgba(253, 253, 253, 0.05) 40%,
    rgba(253, 253, 253, 0.05) 60%,
    rgba(253, 253, 253, 0.05) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-animated-btn .elementor-button:hover::before {
  opacity: 0.15;
}

 

Custom Animated Button Style CSS Style


custom-animated-btn

 

Skill Section Style CSS Style


.skill-icon .elementor-icon-list-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.11);
    border-radius: 100px;
    margin-right: 12px;
    
}

.Work-Experience {
  position: relative;
  border-radius: 12px;
  transition: all 0.4s ease;
  
}

.Work-Experience:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}


.Work-Experience::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(253, 253, 253, 0.15) 0%,
    rgba(253, 253, 253, 0.15) 40%,
    rgba(253, 253, 253, 0.15) 60%,
    rgba(253, 253, 253, 0.15) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Work-Experience:hover::before {
  opacity: 0.5;
}

.Work-Experience {
  position: relative;
  border-radius: 12px;
  transition: all 0.4s ease;
}

 

Skill Section Style CSS Classes


skill-icon
Work-Experience

 

Testimonial Widget Style CSS


.elementskit-single-testimonial-slider .elementskit-profile-info {
  order: 999 !important;
}

.elementskit-single-testimonial-slider {
  display: flex !important;
  flex-direction: column !important;
}

.elementskit-profile-info {
    margin: 0px !important;
}

 

Testimonial Widget Pagination JS




 

Counter Area Style CSS




 

Counter Area Style CSS Classes


abt-img
achievements-icons
achievements-section


 

Contact Information Area Style CSS


 

Contact Information Area Style CSS Classes


custom-icon
contact-icons-section
ct-icons-sec
ct-icons-design

 

Map Style CSS


.elementor-custom-embed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  mix-blend-mode: difference;
  pointer-events: none;
  border-radius: 28px;
  border: none;
}

.mf-input-select .mf_select__menu>div {
    overflow-x: hidden;
}

 

Service Box Style CSS




 

Service Box Style CSS Classes


service-item
elementor-icon-box-icon

 

Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans