Avo Interface Kit
Thomas Bekkers
Clone
Flowbase

avo

CUSTOM CODE
x

Float Button

/* Float */

<style></style>
.hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-float:hover, .hvr-float:focus, .hvr-float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); }

CUSTOM CODE
x

Underline Hover

/* Float */

<style></style>
/* Overline From Center */
.hvr-overline-from-center {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 position: relative;
 overflow: hidden;
}
.hvr-overline-from-center:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 51%;
 right: 51%;
 top: 0;
 background: #5748c5;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
 left: 0;
 right: 0;
}

CUSTOM CODE
x

Sweep

/* Sweep To Right */
.hvr-sweep-to-right {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 position: relative;
 -webkit-transition-property: color;
 transition-property: color;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: #5748c5;
 border-radius: 4px;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: 0 50%;
 transform-origin: 0 50%;
 -webkit-transition-property: transform;
 transition-property: transform;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
 color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

CUSTOM CODE
x

Wiggle Top



<style></style>
@-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

CUSTOM CODE
x

Hover Pop

/* Float */

<style></style>
/* Pop */
@-webkit-keyframes hvr-pop {
 50% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
}
@keyframes hvr-pop {
 50% {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
}
.hvr-pop {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
 -webkit-animation-name: hvr-pop;
 animation-name: hvr-pop;
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-timing-function: linear;
 animation-timing-function: linear;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
}

CUSTOM CODE
x

Read More Link

/* Float */

<style></style>
.cool-link {
   display: inline-block;
   color: #000;
   text-decoration: none;
}

.cool-link::after {
   content: '';
   display: block;
   width: 0;
   height: 2px;
   background: #000;
   transition: width .3s;
}

.cool-link:hover::after {
   width: 100%;
   //transition: width .3s;
}

avo

Content Cards
Buttons
Button Hovers
Navigation
Site Footers

Local Skater Loves Mentioning  That He's Got A Mate In Jail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla

Travel
Business

First Text Message In Weeks Only From Telco Saying I've Gone Over Data Limit

Business

The dangerous myths of "passion"

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read more
ART
2 hours ago

Scrounging Through
The Centre

Read More
BOOKS

"

How to 'Reboot' your Creative Brain in 15 mins.

Thomas Bekkers
User Interface Designer
3 minute read, if ya smart.
Business

It's called the Shaper Effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thomas Bekkers
User Interface Designer

Buttons

Note for users:

Icons used in buttons are based on font awesome type kit. This kit can be downloaded here and added as a typography in your website settings. Once installed on your site you can view the cheat sheet here, showing all available text based icons

CSS based hover interaction can be implemented in your sites custom code. Click the info button specific code and paste it into your sides custom code, these are based on buttons.css and can be viewed here

Primary
Default
Warning
Primary
Dropdown
Icons from Font Awesome
Phone Now
Follow Us
Warning
Primary
Default
Warning
Primary
Default

Hover Interactions

Float Button
Underline
Sweep Left
Wiggle Top
Hover Pop
Read More Link

Navigation Bars

Various Navigation Styles. Edit colour and text to please, more to come

avo

Avocado is the ultimate design kit for Webflow users. 

About

About UsWhat we doOther Services

Company

PricingPolicyContact

Social

FacebookGoogleLinkedin

Join Our Newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
© Avocado 2017-2018. All rights reserved.
Terms & Conditions
Footer 001

avo

HomeProductsResourcesAboutContact

+61 000 000 00
hello@youremail.com
Monday – Friday 8:30am – 4:00pm AEST

© Avocado 2017-2018. All rights reserved.
Footer 002
Product
HomeProductLicenceNewsStoriesMedium
NEWS STORIES
HomeLicenceHomeToolsNewsDeveloper Forums
company
StoriesLicenceMediumHomeStories
community
SupportProductStories

avo

© 2016 Avo Inc
Footer 003 - Based on Nelsons Video Tutorial

Visit us @ flowbase.co

www.dribbble.com/bekkers