Cool CSS Effects You Can Make For The Buttons Of Your Elementor Website

css effects elementor website
When it comes to your Elementor designs, buttons don’t necessarily need to be flat. A little tweaks here and there on them can add that wow factor to your website and increase your conversions or clicks.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

We all know that one of the widgets in our dearly page builder Elementor – and any page builder for that matter – is the button widget. One of the most important parts on a website. Something that websites cannot afford to not have. It’s what your visitors use to take action and get one step closer to that desired bottom of the funnel where they’re no longer visitors, but customers.

cool css effects

Like most widgets on the Elementor, you have several options for customizing buttons on your website, from adding an icon before or after the text to changing different background colors and adding animations depending on the state of the button. But, what if you want to take it to the next level? What if in this current time where the experience of the user matters, you want to add something else to make it more interactive?

I’m not talking about only adding an entrance animation or playing with the motion effects (keep in mind that sometimes these can hurt more than you think). No, what I’m talking about is using snippets of code to add some pretty cool CSS effects that can simply make your CTA stand out like it should.

[For users that know to insert CSS on Elementor, click to scroll below]

Now, if you don’t know how or even where to introduce these snippets of code, fear not. Just by simply going to the advanced tab of your button widget and scrolling down to where it says “Custom CSS” you’ll have a blank space where you can type or paste this.

 

css effects elementor website

 

Note: If you’re not an Elementor Pro user, this will not be available to you. But you can still work around this by inserting the code on your child theme’s stylesheet.css file (read why it is important to have a child theme and take a look at this on how to make one).

One thing to note is that for some of these, the setup is a little bit more complicated, so the button widget won’t do and we’ll have to use the HTML widget instead. That said, let’s take a look at them, shall we?

CSS Effects for Buttons with the HTML widget

01. Skewed Back to the future-esque Button

This button uses the HTML widget to be able create the arrows using SVG code. The cool CSS in here is when you hover over and see the animation with three arrows like if it was telling you: “Hey, it’s this way!”

The CSS uses the property transform: skew(-15deg) on the button outline to create that skewed effect and then it uses it again but 15deg positive this time to compensate and make the text straight.

If you want to add your own text to it, all you have to is change the “NEXT” between the tags on the HTML. And if you want to adjust it to your branding, you can easily change the background-color properties,  make edit the style, you can change the background, color, box shadow and font-family properties.

<!-- Button 1 -->

<div class="wrapper">
<a class="cta" href="#">
<span class="skewed">NEXT</span>
<span class="skewed">
<svg width="66px" height="53px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
</g>
</svg>
</span>
</a>
</div>

<style type="text/css">
.cta {
display: flex;
padding: 15px 20px;
text-decoration: none;
font-family: 'Futura PT', sans-serif;
font-style: italic;
font-weight: bold;
font-size: 40px;
color: white;
background: #0e048a;
transition: 1s;
box-shadow: 6px 6px 0 #07005b !important;
transform: skewX(-15deg);
justify-content: center;
}

.cta:focus {
outline: none;
}

.cta:hover {
transition: 0.5s;
box-shadow: 10px 10px 0 #FBC638 !important;
color: #fff;
}

.cta .skewed:nth-child(2) {
transition: 0.5s;
margin-right: 0px;
}

.cta:hover .skewed:nth-child(2) {
transition: 0.5s;
margin-right: 45px;
}

.skewed {
transform: skewX(15deg)
}

.skewed:nth-child(2) {
width: 20px;
margin-left: 30px;
position: relative;
top: 12%;
}

/**************SVG****************/

path.one {
transition: 0.4s;
transform: translateX(-60%);
}

path.two {
transition: 0.5s;
transform: translateX(-30%);
}

.cta:hover path.three {
animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
transform: translateX(0%);
animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
transform: translateX(0%);
animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes color_anim {
0% {
fill: white;
}
50% {
fill: #FBC638;
}
100% {
fill: white;
}
}
</style>

02. Hover Takes Everything Away Button

This button has one of the coolest non-JS effects that I’ve seen. With Elementor, we are used to seeing the button changing colors on hovering, but the effect itself is only like a fade. One second it’s there, and then it isn’t.

The effect for this button is completely different, as it takes place from the arrow, which is designed from CSS selectors. If you move the mouse real close to the arrow you’ll see how it makes itself part of the background color. One downside of this button design is that the same arrow makes it impossible to add an arrow.

You can easily change, however, the font-family, color and the background on hover.

<!-- Button 2-->
<a class="effect1" href="#">
Let's Go!
<span class="bg"></span>
</a>

<style type="text/css">
.effect1 {
color: #222;
text-decoration: none;
font-family: sans-serif;
font-size: 36px;
position: relative;
padding: 10px 50px 10px 20px;

-webkit-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

-webkit-transform: scale(3);

-ms-transform: scale(3);

transform: scale(3); /*change scale(3) to scale(1)*/
}

.effect1 .bg {
background: #222;
width: 40px;
height: 3px;
position: absolute;
right: 0;
top: 50%;
margin-top: -1px;
z-index: -1;

-webkit-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;
}

.effect1:hover {
padding-right: 20px;
color: #fff;
}

.effect1:hover .bg {
height: 100%;
width: 100%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}

.effect1 .bg:before, .effect1 .bg:after {
content: '';
height: 3px;
width: 12px;
background: #222;
position: absolute;
right: -12px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.effect1 .bg:before {
bottom: 3px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.effect1 .bg:after{
top: 3px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.effect1:hover .bg:before,
.effect1:hover .bg:after{
right: 0;
}

.effect1:hover .bg:before{
bottom: 6px;
}

.effect1:hover .bg:after{
top: 6px;
}
</style>

03. Flipping Two Part Button

Here we have for anyone that is thinking of putting what many would consider too much text for a button, or for someone that can’t decide between two Call-to-action texts. If you hover over the button you’ll see how it does this little flip to show what would be the second part of the button. Right now, the texts are “Lets get started!” and then “Book Now”, but think of the possibilities. You could have “Want your private room?” and then “Contact us now!” or “Test the software” and then “It’s free”.

The CSS properties that I recommend adjusting here are the font-family, background colors for both parts, and the text colors.

.full, .button .qube .front, .button .qube .back, .button .qube .front::before {
width: 100%;
height: 100%;
}
.button {
width: 255px;
height: 80px;
perspective: 1800px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.button .qube {
position: relative;
height: 60px;
width: 255px;
perspective: 1800px;
}
.button .qube .front, .button .qube .back {
backface-visibility: hidden;
transform-style: preserve-3d;
transform: rotateX(-90deg);
transition: transform 0.3s ease;
position: absolute;
color: #fff;
line-height: 60px;
text-align: center;
}
.button .qube .front {
background-color: #191919;
}
/* .button .qube .front::before {
content: '';
display: block;
z-index: -1;
}*/
.button .qube .front::after {
background: #fff;
content: '';
height: 155px;
left: -75px;
opacity: 0.4;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}

.button .qube .back {
background-color: #d6d35d;
color: #191919;
transform: rotateX(0deg) translateZ(60px);
}
.button .qube:hover .front {
transform: rotateX(0deg) translateZ(30px);
}
.button .qube:hover .back {
transform: rotateX(90deg) translateZ(30px);
}
.button:active .front {
border-radius: 0;
background-color: transparent;
color: #191919;
}
.button:active .front::before {
background-color: #d6d35d;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.button:active .front::after {
left: 120%;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

CSS Effects for Buttons with the Button widget

This is a little more in the wheelhouse of those who would like to give their buttons an kickass effect, still using the widget due to the dynamic data options. They still require you to add the CSS to the widget, though.

That said, on this list there are only two CSS effects for your buttons, and they’re both based on making the buttons 3D. Because, wouldn’t we love more 3D in our designs, right?

04. 3D Button 1

When it comes to designing buttons on Elementor, we have several options for designing buttons, but none really include 3D. And it just makes them more real. This button as well as the next one feel like something you can actually click on.

Since this button has been designed with the Elementor widget, all the branding can be done using the controller.

#shadow-button a {
box-shadow: 0 6px rgba(179,22,22,0.8);
}
#shadow-button a:active {
background-color: #ff0000;
box-shadow: 0 5px rgba(179,22,22,0.6);
transform: translateY(4px);
}

05. 3D Button 2

The same thing goes with this button. While the previous one, the effect is seen when you take the action, on this one the effect is more when you hover.

And just as the last one, this was designed with the button widget, so everything can be customized to your liking through the Elementor options.

.shadow-btn-two a {
top: 0;
left: 0;
transition: all 0.15s linear 0s;
position: relative;
display: inline-block;
padding: 15px 25px;
background-color: #ffe800;
text-transform: uppercase;
color: #404040;
font-family: arial;
letter-spacing: 1px;
box-shadow: -6px 6px 0 #404040;
text-decoration: none;
}
.shadow-btn-two a:hover {
top: 3px;
left: -3px;
box-shadow: -3px 3px 0 #404040;
}
.shadow-btn-two a:hover::after {
top: 1px;
left: -2px;
width: 4px;
height: 4px;
}
.shadow-btn-two a:hover::before {
bottom: -2px;
right: 1px;
width: 4px;
height: 4px;
}
.shadow-btn-two a::after {
transition: all 0.15s linear 0s;
content: '';
position: absolute;
top: 2px;
left: -4px;
width: 8px;
height: 8px;
background-color: #404040;
transform: rotate(45deg);
z-index: -1;
}
.shadow-btn-two a::before {
transition: all 0.15s linear 0s;
content: '';
position: absolute;
bottom: -4px;
right: 2px;
width: 8px;
height: 8px;
background-color: #404040;
transform: rotate(45deg);
z-index: -1;
}

Final Words

When it comes to your Elementor designs, buttons don’t necessarily need to be flat. A little tweaks here and there on them can add that wow factor to your website and increase your conversions or clicks.

I hope you’ve liked this list. There are more button effects and other types of interactive goodies to come in the future!

Let me know what you think in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *

backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want