Avo Interface Kit
Thomas Bekkers
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); }

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;
}

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);
}

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; }

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;
}

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

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

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

The dangerous myths of "passion"

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read more
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.

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

Navigation Bars

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

Footer 001
Footer 002

Visit us @ flowbase.co

www.dribbble.com/bekkers