Sla links over

Spring naar de inhoud
Spring naar navigatie

ONE BUTTONS

Button animaties

Aan de buttons op jouw ONE website kun je naast de standaard kleur verandering bij een klik of mouse-over ook een animatie meegeven. Op deze pagina vindt je een overzicht van alle mogelijke button animaties.

Hoe kan ik deze buttons gebruiken?

Boven iedere button staat de class naam van de button vermeld. Deze kun je in de ONE-blokken op jouw website invoeren in het veld Button style. Nadat je de class naam heb ingevoerd en het ONE-blok heb opgeslagen krijgt de betreffende button automatisch de ingevoerde animatie mee.

Bekijk de mogelijkheden

2D Transforms

Grow

In te voeren class naam:
grow

Shrink

In te voeren class naam:
shrink

Pulse

In te voeren class naam:
pulse

Pulse grow

In te voeren class naam:
pulse-grow

Pulse shrink

In te voeren class naam:
pulse-shrink

Push

In te voeren class naam:
push

Pop

In te voeren class naam:
pop

Rotate

In te voeren class naam:
rotate

Grow rotate

In te voeren class naam:
grow-rotate

Float

In te voeren class naam:
float

Sink

In te voeren class naam:
sink

Hover

In te voeren class naam:
hover

Hang

In te voeren class naam:
hang

Skew

In te voeren class naam:
skew

Skew forward

In te voeren class naam:
skew-forward

Skew backward

In te voeren class naam:
skew-backward

Wobble horizontal

In te voeren class naam:
wobble-horizontal

Wobble horizontal

Wobble vertical

In te voeren class naam:
wobble-vertical

Wobble vertical

Wobble to bottom right

In te voeren class naam:
wobble-to-bottom-right

Wobble to bottom right

Wobble to top right

In te voeren class naam:
wobble-to-top-right

Wobble to top right

Wobble top

In te voeren class naam:
wobble-top

Wobble bottom

In te voeren class naam:
wobble-bottom

Wobble skew

In te voeren class naam:
wobble-skew

Buzz

In te voeren class naam:
buzz

Buzz out

In te voeren class naam:
buzz-out

Border transities

Border fade

In te voeren class naam:
border-fade

Hollow

In te voeren class naam:
hollow

Trim

In te voeren class naam:
trim

Outline outward

In te voeren class naam:
outline-outward

Outline outward

Outline inward

In te voeren class naam:
outline-inward

Round corners

In te voeren class naam:
round-corners

Shadow and Glow transities

Glow

In te voeren class naam:
glow

Box shadow outset

In te voeren class naam:
box-shadow-outset

Box shadow outset

Box shadow inset

In te voeren class naam:
box-shadow-inset

Box shadow inset

Float shadow

In te voeren class naam:
float-shadow

Hover shadow

In te voeren class naam:
hover-shadow

Shadow radial

In te voeren class naam:
shadow-radial

Tekst bubbles

Bubble top

In te voeren class naam:
bubble-top

Bubble right

In te voeren class naam:
bubble-right

Bubble bottom

In te voeren class naam:
bubble-bottom

Bubble-left

In te voeren class naam:
bubble-left

Bubble float top

In te voeren class naam:
bubble-float-top

Bubble float top

Bubble float right

In te voeren class naam:
bubble-float-right

Bubble float right

Bubble float bottom

In te voeren class naam:
bubble-float-bottom

Bubble float bottom

Bubble float left

In te voeren class naam:
bubble-float-left

Bubble float left

Hoekjes

Curl top left

In te voeren class naam:
curl-top-left

Curl top right

In te voeren class naam:
curl-top-right

Curl bottom right

In te voeren class naam:
curl-bottom-right

Curl bottom right

Curl bottom left

In te voeren class naam:
curl-bottom-left

Curl bottom left

Scroll naar boven