Flatsome Buttons
Flatsome buttons are structured fairly simply, but they do have a few quirks. The structure looks something like this:
<a> tag wrapper
This will contain your href link, primary / secondary / etc class, style class (is-outline, is-link, etc), and any custom padding and radius settings as a style tag
<span> text wrapper
The text itself goes inside a span class inside the a tag. This is going to help with positioning when an icon is added.
Other things to know:
Note that the normal button does have a border on it (1px solid rgba(0,0,0,.05)) which can be a problem at times.
The hover effect on normal buttons is a shadow (this is how Flatsome deals with darkening the color without knowing what color you’re going to use). Look for “box-shadow” in the hover state. When customizing you may need to turn this off.
When customizing Flatsome buttons, I usually only worry about the default state and the hover state. You can add your effects as your own class that you put on buttons individually, or do them site wide. When doing them sitewide, you might need to take the “dark” class of the section into account.
General Button things:
When working with hover states, remember that transitions go on the default state NOT on the hover state.
Whatever css you add inside a :hover only applies when you are hovered on that element. What does that mean? If you put a transition inside your :hover it will only apply while you’re hovering, not when you move off the button. So what happens when I move my mouse off that element if the transition isn’t complete? It’s going to pop back to the default state instead of transitioning there because it’s like that transition never existed.
Change the primary button with the class gradient-button to have the following gradient as a background:
background: rgb(76,115,252);
background: linear-gradient(270deg, rgba(76,115,252,1) 0%, rgba(118,208,170,1) 100%);
Try to do this without actually using the gradient-button class. Apply to all default primary buttons site wide, but do not affect the outline or simple buttons (you’re going to need the :not pseudo class for this).
Tips: Hover states with gradients are a challenge because the background: linear-gradient rule can’t be transitioned like background-color can. You have options: you could do your own overlay to transition in and out on top of the background (maybe you want your gradient to turn solid on hover or vice versa). You can do a transition: scale(1.1) to make the button grow on hover. My favorite way is to make the gradient move on hover, so that’s what we will do here.
Steps:
- Create a before with the gradient on it
- Make the gradient larger than the button itself so it can move back and forth on hover (I did 150% wide)
- Remove the border (note that this might cause issues with the button being slightly smaller than other buttons, but it shouldn’t be super noticeable)
- Hide any excess
- Give the span tag a position relative so it is able to go on top of the before
- Add a keyframe to move the gradient back and forth on hover.
Keyframes need two things: an animation tag on the thing being effected and the instructions for what to do on the keyframe. The animation tag references whatever @keyframe you call: @keyframe slide gets called with animation: slide .2s infinite (keyframe name, time duration, and amount of repeats)
Click me!
Click me!
Click me!
.button.primary:not(.is-outline):not(.is-link){
border: none;
overflow: hidden;
}
.button.primary:not(.is-outline):not(.is-link) span{
position: relative;
}
.button.primary:not(.is-outline):not(.is-link):before{
content: '';
width: 150%;
height: 100%;
display: block;
background: rgb(76,115,252);
background: linear-gradient(270deg, rgba(76,115,252,1) 0%,
rgba(118,208,170,1) 100%);
position: absolute;
top: 0;
left: 0%;
transition: .2s ease-in;
}
.button.primary:not(.is-outline):not(.is-link):hover:before{
animation: slide infinite 3s;
}
@keyframes slide{
0%{
left: 0%;
}
50%{
left: -50%;
}
100%{
left: 0%
}
}
Pop Effect
Did you know css has two borders? There’s the normal border we all know, and then there’s an outline that goes outside the border. Outline mostly works the same as border, but it does have a property called offset that we can use to make some fun effects.
Steps:
- Make the default flatsome outline go away by making it transparent
- Create a 1px outline to replace the border than is no longer visible. It uses the same settings as border so you need to set it to 1px solid with a color. Make the color rgb 9, 116, 178 with the transparency at 0.5.
- We are going to animate the outline-offset property. Set it to 0 on the default state for good measure (it was probably already set to 0 but we’ll set it anyway).
- Set a transition. I did mine at .3s ease-out. The flatsome transition already on the button doesn’t seem to apply to these new effects so we need to make our own.
- On hover set the outline-offset to 15px
- Change the outline color to transparent so as it grow and transitions it fades away.
The original effect can be found at this code pen in the 5th example
Note that their code is a little more complex. If you want to recreate theirs, you will need to remove flatsome’s background color that is added on hover and add a shadow on hover. You will also need to bring the border back on hover (since the outline disappears) so you can set the default border to be 1px solid transparent on default and bring in a color on hover.
.pop-effect{
border-color: transparent !important;
outline: 1px solid !important;
transition: .3s ease-out;
outline-color: rgba(9, 116, 178, 0.5) !important;
outline-offset: 0px;
}
.pop-effect:hover{
outline-offset: 15px;
outline-color: rgba(9, 116, 178, 0) !important;
}
Draw Effect
We’ll complete this last exercise together. Check out the code pen link to the right to see the example.
This effect is going to involve using an svg, so we must code it from scratch (or do some work arounds with php or javascript). The main trick is using the dasharray on the svg to make it look like a drawing effect, when in reality it is just a dashed border with a lot of space between the dashes. This is a common css method for doing any drawing effects without using a javascript library.
Here’s the custom html code we will use for our button:
<a class="btn-svg" data-text="Click Me!" href="5">
<svg>
<rect x="0" y="0" fill="none" width="100%"
height="100%"/>
</svg>
<span>Click Me!</span>
</a>
Click Me!
The original effect can be found at this code pen in the 1st example
General note for these more complex effects: a lot of the more complex hover effects will use fixed sizing on the button—especially anything with icons or anything appearing / disappearing on hover. This is okay if every button is going to have the same exact text, but that is not our normal use case. Make sure your button will be able to accommodate for different amount of text.
.btn-svg{
padding: 7px 35px;
position: relative;
text-transform: uppercase;
line-height: 2;
font-weight: normal;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
display: inline-flex;
flex-direction: column;
align-items: center;
}
.btn-svg svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: rotate(180deg);
}
.btn-svg rect {
fill: none;
stroke: #0974b2;
stroke-width: 2;
stroke-dasharray: 360%;
-webkit-transition: all 1.35s
cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.35s
cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-svg:hover {
color: #0974b2;
font-weight: bold;
letter-spacing: 1px;
}
.btn-svg::after {
content: attr(data-text);
color: black;
letter-spacing: 1px;
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: bold;
}
.btn-svg:hover rect {
stroke-width: 3;
stroke-dasharray: 30%, 360%;
stroke-dashoffset: -50%;
}