ActivHover Product Docs Demo Contact Us Sponser

DOCUMENTATION

ActivHover is a css, javasript library that allows web developers to add advance hover Effect to their buttons,links,divs and any element they would want to have an hover effect on. Its simlicity of usage will thereby reduce the work load involved in making hover effects with css and javascript.

The ActivHover product page has a lot of button effects you can choose from.Click here to try them in your projet, we assure you you won't be disappointed.

HOW TO USE ACTIVHOVERR

1. First Add this CDN to your HTML Code (Copy and Paste the css link to the head section of your code and the script tag to the button of your HTML Code)

NB: Put the css link to the ActivHover first followed by your default css link. This will allow you to edit the button effectively.

CSS

<link rel="stylesheet" href="https://activhover.com/cdn/ActivHover.css">

JS

<script src="https://activhover.com/cdn/ActivHover.js"></script>

2. Click on the button you like and copy the class name in the pop up menu.

Paste it in the class of the element you would like a hover effect on.

Illustration

HTML

<button class="hov hov-bg-slideFrom-right"></button>

STYLING

ActivHover button effect was built to work with different customizations.This is just to allow users to edit them to suit thier preferences.

NB: Effects found on ActiverHover Buttons all have a default Width:100px; , height:50px; and a consitent color profile, all which you can change to suit your website style or theme.

<button class="hov hov-bg-slideFrom-right"></button>

Use the hov class name if you won't to add the same effect to multiple element

<button class="hov hov-bg-slideFrom-right"></button>
<style>

.hov{
    height: 60px;
    width: 60px;
    background-color: #35858B;
    border: 2px solid #35858B;
    text-transform: uppercase;
    font-style: italic;
    text-align: start;
    font-family: 'Courier New', Courier, monospace;
}

</style>

Use the hov-"effectname" class name if you won't to add the effect to a specific element

<button class="hov hov-bg-slideFrom-right"></button>
<style>
.hov-bg-slideFrom-right{
    height: 60px;
    width: 60px;
    background-color: #35858B;
    border: 2px solid #35858B;
    text-transform: uppercase;
    font-style: italic;
    text-align: start;
    font-family: 'Courier New', Courier, monospace;
}
</style>

* CSS STYLE COMPATIBEL WITH ACTIVEHOVER EFFECT

ADVANCE STYLING

To get the most out of ActivHover, specifically - to set background-color for more than two elements of the same button, you would have to use the .hov-bg class name.

HTML

<button class="hov hov-bg-slideFrom-right"></button>

CSS

<style>
.hov-bg{
    height: 60px;
    width: 60px;
    background-color: #35858B;
    border: 2px solid #35858B;
    text-transform: uppercase;
    font-style: italic;
    text-align: start;
    font-family: 'Courier New', Courier, monospace;
}
</style>

YouTube Tutorials

--> Visit our Help page to send us any issue you found whiles using the effects.