Click here
Click here

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. }

5CAPITALS

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)

https://www.youtube.com/watch?v=Wt5_HJdWsqo

SUBMIT
SUBMIT

3D ROTATING IMAGE GALLERY USING ELEMENTOR | WORDPRESS IMAGE GALLERY

https://www.youtube.com/watch?v=taT8GCrUkRU

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

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

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.

Scroll Down

Dr. Santiago Fronda

Director, Project & Infrastructure Finance
Hire Me

Dr. Santiago Fronda

Director, Project & Infrastructure Finance

Dr. Santiago Fronda

Your Cool Description

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
error: Content is protected !!