hover animations for borders


Include the css (https://chrisgrounds--css.s3.eu-west-2.amazonaws.com/animate-hover.css) in your html and then set the following css variables:

  --border-animate-background-color: none;
  --border-animate-border-color-on-hover: #60daaa;
  --border-animate-text-color-before-hover: #f45e61;
  --border-animate-text-color-on-hover: #60daaa;
  --border-animate-transition-duration-0-25: 0.25s;
  --border-animate-transition-delay: 0.25s;

You can customise the buttons through these variables.

To get the styles to work you need to include two classes on your HTML element:

<div class="element__animate element__animate--XXX">CONTENT</div>

where XXX is the name of the specific animation you want. The options are:

Round trip Rejoin Tie fighter On the top ltr On the top rtl On the bottom ltr On the bottom rtl On the right On the left