ELEMENTOR COOL BUTTON HOVER EFFECT

Gradient Button Effect

  1. selector{
  2. --btn-width: 180px;
  3. --btn-height: 50px;
  4. --btn-background: #0e1538;
  5. --left-gradient: #F803F8;
  6. --right-gradient: #03F2FD;
  7. }
  8. selector a {
  9. position: relative;
  10. width: var(--btn-width);
  11. height: var(--btn-height);
  12. }
  13. selector a:before,
  14. selector a:after {
  15. content: '';
  16. position: absolute;
  17. inset: 0;
  18. transition: 0.5s;
  19. }
  20. selector a:nth-child(1):before,
  21. selector a:nth-child(1):after {
  22. background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
  23. }
  24. selector a:hover:before {
  25. inset: -3px;
  26. }
  27. selector a:hover:after {
  28. inset: -3px;
  29. filter: blur(10px);
  30. }
  31. selector a span {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 100%;
  36. height: 100%;
  37. background: var(--btn-background);
  38. z-index: 10;
  39. display: flex;
  40. justify-content: center;
  41. align-items: center;
  42. overflow: hidden;
  43. }

Button Shine Effect

  1. /*Glass Shine Effect*/
  2. selector a span::before {
  3. content: '';
  4. position: absolute;
  5. top: 0;
  6. left: -50%;
  7. width: 100%;
  8. height: 100%;
  9. background: rgba(255,255,255,0.075);
  10. transform: skew(160deg);
  11. }

How to Create a 3D Button on WordPress (No CSS Needed)

3D ROTATING IMAGE GALLERY USING ELEMENTOR | WORDPRESS IMAGE GALLERY

3D Image Slider JS

  1. <script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>
  2. <script>
  3. var $ = jQuery
  4. $(document).ready(function(){
  5. var className = ‘myGallery’ //CLASSNAME
  6.  
  7. $(‘.’ + className).each(function(){
  8. var span = $(this).find(‘.elementor-widget-image’),
  9. len = span.length
  10. span.each(function(i){
  11. $(this).css(‘transform’, ‘rotateY(‘ + i*360/len + ‘deg) translateZ(calc(‘ + ((len + 1) * 31 + len*1) + ‘px))’)
  12. })
  13. $(this).parent().addClass(‘myGalleryParent’)
  14. })
  15. })
  16. </script>

3D Image Slider JS

  1. selector .elementor-widget-wrap{
  2. width: 200px;
  3. height:200px;
  4. transform-style: preserve-3d;
  5. }
  6. selector .elementor-widget-image{
  7. position: absolute;
  8. top: 0;
  9. left: 0;
  10. width: 100%;
  11. height: 100%;
  12. transform-origin: center;
  13. transform-style: preserve-3d;
  14. -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
  15. margin: 0 !important;
  16. }
  17. selector .elementor-widget-image img{
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. object-fit: cover;
  24. }

3D Image Animation CSS

/*ANIMATION*/
selector .elementor-widget-wrap{
    /*Duration Control*/
    animation: animate 20s linear infinite;
}
@keyframes animate{
    0%
    {
        transform: perspective(1000px) rotateY(0deg);
    }
    100%
    {
        transform: perspective(1000px) rotateY(360deg);
    }
}
 

3D Image Slider CSS

/*MOBILE*/
@media (max-width:767px){
.myGalleryParent{
    /*Scale Control*/
    transform: scale(0.7);
}
}
 
 

ELEMENTOR MAGIC CARD HOVER EFFECT | WORDPRESS ELEMENTOR PRO TUTORIAL

Magic Card Effect CSS

  1. selector{
  2. –first-color: #5ddcff;
  3. –second-color: #3c67e3;
  4. –third-color: #4e00c2;
  5. }
  6. @property –rotate {
  7. syntax: “<angle>”;
  8. initial-value: 132deg;
  9. inherits: false;
  10. }
  11. selector::before, selector::after{
  12. opacity: 0;
  13. content: “”;
  14. transition: all 0.5s ease-in-out;
  15. }
  16. selector:hover::before, selector:hover::after{
  17. position: absolute;
  18. z-index: –1;
  19. background-image: linear-gradient(
  20. var(–rotate)
  21. , var(–first-color), var(–second-color) 43%, var(–third-color));
  22. animation: spin 2.5s linear infinite;
  23. opacity: 1;
  24. }
  25. selector:hover::before {
  26. width: 104%;
  27. height: 104%;
  28. border-radius: 8px;
  29. top: –2%;
  30. left: –2%;
  31. }
  32. selector:hover::after {
  33. top: 0;
  34. left: 0;
  35. right: 0;
  36. height: 100%;
  37. width: 100%;
  38. transform: scale(0.9);
  39. filter: blur(70px);
  40. }
  41. @keyframes spin {
  42. 0% {
  43. –rotate: 0deg;
  44. }
  45. 100% {
  46. –rotate: 360deg;
  47. }
  48. }

John Frank

Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit

John Frank

Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit

John Frank

Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit

John Frank

Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit

100% Free Elementor Widget

Brand New Style Added

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius.

Jessica

Writer

1.

Researcher

2.

Charlotte

Creative Thinker

3.

Rebecca

Flipped Style

Carousel Tabs Again?!

Image HotSpots Elementor Widget

Highlight your image(s) with relevant information to increase your conversions using Premium HotSpots Widget for Elementor Page Builder.



Plugins Used in This Landing Page

Animated Gradients Elementor Section Add-on

Add Animated Gradient colors to your Elementor sections using Premium Animated Gradients Background Section Add-on.



Plugins Used in This Landing Page

Ken Burns Elementor Section Add-on

Create attractive slideshows using the most popular cinematic effect Ken Burns Section Add-on developed for Elementor Page Builder.



Plugins Used in This Landing Page

Premium Particles Elementor Section Add-on

Give your Elementor sections an outstanding look using the well-known Section Particles which is available in Premium Addons for Elementor.



Plugins Used in This Landing Page

Pricing Table Elementor Widget

Create highly customizable pricing plans using Premium Pricing Table Elementor Widget. It’s totally free of charge. Get it now!



Plugins Used in This Landing Page

Team Members Elementor Widget

Demonstrate your team, employees, or contributors using Premium Team Members Widget for Elementor. Available with advanced customization options.



Plugins Used in This Landing Page

Premium Unfold Elementor Widget

Save more space on your Elementor website using Premium Unfold Elementor Widget which comes with outstanding customization options.



Plugins Used in This Landing Page

  • Go

  • Fly

  • Travel

  • Explore

  • Eat

  • Repeat

Amanda Lee

Web Designer

Adam Cheise

UI / UX Designer

Eye-Catchy Fancy Widget

Premium Flip Box Elementor Widget

Flip Box Widget for Elementor Page Builder will guide you to add an eye-catching call to actions to  your website as it comes with a 3D effect.

Dr. Santiago Fronda

Director, Project & Infrastructure Finance

Hire Me

Dr. Santiago Fronda

Director, Project & Infrastructure Finance

Dr. Santiago Fronda

Sunrise

I’m a React Developer

Hire Me

Blueberry

Stormy

I’m a Senior Designer

Hire Me

Mandarin

Rainy

I’m a Creative Director

Hire Me