Examples required

[Rahul]

Some effects like buttonLeft requires span as wrapper for getting proper animation on the content. Novice users might get confused if they try to add only the class name. Hence it would be better to add an examples page to showcase both HTML and CSS for all the effects.

[Emil Kowalski]

Do you have any examples? Something like codepen?

[Rahul]

Not like that. I found out the usage of span for certain effects when i went through the project. But others who just copy the styles won't know what went wrong when they get misaligned/wrong animations. So it can be displayed in another page like this(for all effects),

HTML :

<div class="buttonLeft">
    <span>Hover Me</span>
 </div>

CSS :

.buttonLeft {
    height: 40px;
    padding: 0 14px;
    overflow: hidden;
    background: #474E51;
    position: relative;
    line-height: 40px;
    color: #fff;
}

.buttonLeft::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: #5778F3;
    transition: transform .2s ease-in-out;
}

.buttonLeft:hover::before {
    transform: translateX(0);
}

.buttonLeft span {
    position: relative;
    z-index: 1;
}

If you can do for some effects, I can help in adding remaining (not a Vue expert but can follow examples).

[Emil Kowalski]

I will think about it, thanks!

[Rahul]

Instead of new page, you can add it in wiki. See here. I don't have access to create wiki at your end.