# Cursor Effect

#### Hide Mouse Cursor

This is the hidde effect of cursor.

Show Code Example
HIDE CURSOR

    <body data-plugin-cursor-effect data-plugin-options="{'hideMouseCursor': true}">

#### Custom Cursor Color

Change cursor to your custom color.

Show Code Example
CHANGE COLOR

    <body data-plugin-cursor-effect data-plugin-options="{'cursorOuterColor': '#10b130', 'cursorInnerColor': '#10b130'}">

#### Pre-Defined Sizes

Change cursor with pre-defined sizes.

Show Code Example
SMALL NORMAL BIG

    <!-- Small -->
    <body data-plugin-cursor-effect data-plugin-options="{'size': 'small'}">

    <!-- Normal -->
    <body data-plugin-cursor-effect data-plugin-options="{'size': 'normal'}">

    <!-- Big -->
    <body data-plugin-cursor-effect data-plugin-options="{'size': 'big'}">

#### Pre-Defined Styles

Change cursor with pre-defined styles.

Show Code Example
CIRCLE SQUARE

    <!-- Circle -->
    <body data-plugin-cursor-effect>

    <!-- Square -->
    <body data-plugin-cursor-effect data-plugin-options="{'style': 'square'}">

#### Hover Effect and Color

The hover effect of cursor on elements.

Show Code Example
FIT PLUS DEFAULT PLUS DARK PLUS LIGHT
Block
Block
Block

The attribute data-cursor-effect-hover should be added to element that will be hovered. Example of usage:

    <!-- Fit Effect -->
    <a class="btn btn-primary btn-modern btn-px-3 btn-py-2" data-cursor-effect-hover="fit">HOVER ME</a>

    <!-- Plus Effect + Default Color -->
    <a class="btn btn-light btn-modern btn-px-3 btn-py-2" data-cursor-effect-hover="plus">HOVER ME</a>

    <!-- Plus Effect + Dark Color -->
    <a class="btn btn-primary btn-modern btn-px-3 btn-py-2" data-cursor-effect-hover="plus" data-cursor-effect-hover-color="dark">HOVER ME</a>

    <!-- Plus Effect + Light Color -->
    <a class="btn btn-primary btn-modern btn-px-3 btn-py-2" data-cursor-effect-hover="plus" data-cursor-effect-hover-color="light">HOVER ME</a>

    <!-- Input + Fit Effect -->
    <input type="text" class="form-control" value="" placeholder="Name" data-cursor-effect-hover="fit" />

    <!-- Custom Block + Fit Effect -->
    <div class="d-flex align-items-center justify-content-center bg-color-light-scale-1 py-5" data-cursor-effect-hover="fit">
    	Block
    </div>