fluento

• Home
• API Documentation
• design
• Demos
• credits
• addons
• github

demos

classes

navbar

• Page 1
• Page 2

source code:

<ul class="navbar">
	<li><a>Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

class pairs

glow

button

source code:

<button class="glow">button</button>

navbar

• Page 1
• Page 2

source code:

<ul class="navbar glow">
	<li><a>Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

push

button

source code:

<button class="push">button</button>

navbar

• Page 1
• Page 2

source code:

<ul class="navbar push">
	<li><a>Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

combining class pairs

a navbar with classes glow and push

• Page 1
• Page 2

source code:

<ul class="navbar glow push">
	<li><a>Page 1</a></li>
	<li><a id="active">Page 2</a></li>
</ul>

animations

bounce

source code

<div style="height: 100px; width: 100px; animation: bounce 2s infinite; background: red"></div>

flip

Source Code

<button style="animation: flip 1s infinite">i spin!</button>

fadeback

i fade in and out

Source Code

<p style="animation: fadeback 1s infinite">i fade in and out</button>

spin

source code

<button style="animation: spin 1s infinite">I Spin!</button>

slide-in animations

down

source code

<button style="animation: slidedown 1.5s infinite">i slide!</button>

up

source code

<button style="animation: slideup 1.5s infinite">i slide!</button>

left

source code

<button style="animation: slideleft 1.5s infinite">i slide!</button>

right

source code

<button style="animation: slideright 1.5s infinite">i slide!</button>

icon buttons

<button class="icon-button" style="text-transform: none;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" height="24" preserveAspectRatio="xMinYMin" class="icon__icon"><path d="m8 6.641 1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>Download File "Never Gonna Give You Up.docx"</button>

emoji

Noto Color Emoji

that joke was so funny 😂

noto color emoji supports all the latest emojis from android 12.

browser

that joke was so funny 😂

Type some emojis here and try noto out