ELEMENTOR COOL BUTTON HOVER EFFECT
Gradient Button Effect
- selector{
- --btn-width: 180px;
- --btn-height: 50px;
- --btn-background: #0e1538;
- --left-gradient: #F803F8;
- --right-gradient: #03F2FD;
- }
- selector a {
- position: relative;
- width: var(--btn-width);
- height: var(--btn-height);
- }
- selector a:before,
- selector a:after {
- content: '';
- position: absolute;
- inset: 0;
- transition: 0.5s;
- }
- selector a:nth-child(1):before,
- selector a:nth-child(1):after {
- background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
- }
- selector a:hover:before {
- inset: -3px;
- }
- selector a:hover:after {
- inset: -3px;
- filter: blur(10px);
- }
- selector a span {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: var(--btn-background);
- z-index: 10;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- }
Button Shine Effect
- /*Glass Shine Effect*/
- selector a span::before {
- content: '';
- position: absolute;
- top: 0;
- left: -50%;
- width: 100%;
- height: 100%;
- background: rgba(255,255,255,0.075);
- transform: skew(160deg);
- }
How to Create a 3D Button on WordPress (No CSS Needed)
3D ROTATING IMAGE GALLERY USING ELEMENTOR | WORDPRESS IMAGE GALLERY
3D Image Slider JS
- <script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>
- <script>
- var $ = jQuery
- $(document).ready(function(){
- var className = ‘myGallery’ //CLASSNAME
- Â
- $(‘.’ + className).each(function(){
- var span = $(this).find(‘.elementor-widget-image’),
- len = span.length
- span.each(function(i){
- $(this).css(‘transform’, ‘rotateY(‘ + i*360/len + ‘deg) translateZ(calc(‘ + ((len + 1) * 31 + len*1) + ‘px))’)
- })
- $(this).parent().addClass(‘myGalleryParent’)
- })
- })
- </script>
3D Image Slider JS
- selector .elementor-widget-wrap{
- width: 200px;
- height:200px;
- transform-style: preserve-3d;
- }
- selector .elementor-widget-image{
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- transform-origin: center;
- transform-style: preserve-3d;
- -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
- margin: 0 !important;
- }
- selector .elementor-widget-image img{
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
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
- selector{
- –first-color: #5ddcff;
- –second-color: #3c67e3;
- –third-color: #4e00c2;
- }
- @property –rotate {
- syntax: “<angle>”;
- initial-value: 132deg;
- inherits: false;
- }
- selector::before, selector::after{
- opacity: 0;
- content: “”;
- transition: all 0.5s ease-in-out;
- }
- selector:hover::before, selector:hover::after{
- position: absolute;
- z-index: –1;
- background-image: linear-gradient(
- var(–rotate)
- , var(–first-color), var(–second-color) 43%, var(–third-color));
- animation: spin 2.5s linear infinite;
- opacity: 1;
- }
- selector:hover::before {
- width: 104%;
- height: 104%;
- border-radius: 8px;
- top: –2%;
- left: –2%;
- }
- selector:hover::after {
- top: 0;
- left: 0;
- right: 0;
- height: 100%;
- width: 100%;
- transform: scale(0.9);
- filter: blur(70px);
- }
- @keyframes spin {
- 0% {
- –rotate: 0deg;
- }
- 100% {
- –rotate: 360deg;
- }
- }
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.
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
Amanda Lee
Adam Cheise
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.