Pro

Outline

Outline element with outer border

Overview

Use outline value in data-fx data attribute to outline an element with outer border. Default gap size is 2px, means that there is a 2px gap between element and border. Read more in Size section.

How to use

Use data-fx="{action}:outline" data attribute to add a border to element.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

On hover

To outline an element on its hover, add data-fx="h:outline-{direction}" data attribute.

h:outline
<div data-fx="h:outline">h:outline</div>

On active

To outline an element when it gets .active class, add data-fx="a:outline" data attribute.

Click the elements to toggle its .active class
a:outline
<div data-fx="a:outline">a:outline</div>

On trigger hover

Outline a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:outline" data attribute to the elements you want to outline when trigger is hovered.

Hover this trigger
th:outline
<div data-trigger="hover">
  <div data-fx="th:outline">th:outline</div>
</div>

On trigger active

Outline single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:outline" data attribute to elements you want to outline when trigger is hovered.

Click this trigger to toggle its .active class
ta:outline
<div data-trigger="active">
  <div data-fx="ta:outline">ta:outline</div>
</div>

Size

You can change the default 2px gap by adding outline-{md|lg} value to data-fx attribute where:

  • outline-md makes 4px gap
  • outline-lg makes 6px gap

It can be combined it with any {action} in data-fx="{action}:fade-*" attribute.

h:outline
h:outline outline-md
h:outline outline-lg
<div data-fx="h:outline">h:outline</div>
<div data-fx="h:outline outline-md">h:outline outline-md</div>
<div data-fx="h:outline outline-lg">h:outline outline-lg</div>