ΕΠΙΛΕΞΤΕ ΤΗ ΓΛΩΣΣΑ ΣΑΣ

Sign in to your account
?
?
Buttons
Flat Buttons
Raised Buttons
FAB Buttons
Icon Buttons
Sizes



Block


Waves
Dark Style
Light Style

Shadow Dark Style
Shadow Light Style

You can use "Waves" Anywhere, on any element which has the style - "position: relative; overflow: hidden;"
alt text
alt text
alt text
alt text
Choose Colors
Tabs
Default Style

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 2

Lorem ip2um dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim. Pellentesque placerat nibh quis ante aliquam, ut scelerisque lectus rhoncus. Ut orci velit, bibendum eu enim vel, pulvinar faucibus metus. Vivamus facilisis ligula sed rhoncus semper.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.


Dark Style

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 2

Lorem ip2um dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim. Pellentesque placerat nibh quis ante aliquam, ut scelerisque lectus rhoncus. Ut orci velit, bibendum eu enim vel, pulvinar faucibus metus. Vivamus facilisis ligula sed rhoncus semper.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.


Shadow Style

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 2

Lorem ip2um dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim. Pellentesque placerat nibh quis ante aliquam, ut scelerisque lectus rhoncus. Ut orci velit, bibendum eu enim vel, pulvinar faucibus metus. Vivamus facilisis ligula sed rhoncus semper.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.

Tab 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Tab 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien. Pellentesque cursus ex sed purus rutrum tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor nisl, ultricies quis elementum sit amet, hendrerit pharetra erat. Etiam cursus, ex ac vestibulum congue, ex felis ullamcorper quam, vel scelerisque ligula orci id enim.


Accordions
Default Style
Web Design & Development
Some text here...
Logo / Corporate Identity
Some text here...
Vivamus sed lacus et nisi semper malesuada eu et nulla.
Some text here...


Dark Style
Web Design & Development
Some text here...
Logo / Corporate Identity
Some text here...
Vivamus sed lacus et nisi semper malesuada eu et nulla.
Some text here...


Toggles
Default Style
Web Design & Development
Some text here...
Logo / Corporate Identity
Some text here...
Vivamus sed lacus et nisi semper malesuada eu et nulla.
Some text here...


Dark Style
Web Design & Development
Some text here...
Logo / Corporate Identity
Some text here...
Vivamus sed lacus et nisi semper malesuada eu et nulla.
Some text here...
Choose Colors
Dropdowns
Lower left
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Lower right
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Top left
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Top right
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action

Lower left (over button)
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Lower right (over button)
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Top left (over button)
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Top right (over button)
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action


Dialogs

Do you think this is Awesome?

Do you think this is Awesome?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium tincidunt eros sed venenatis. Sed metus tellus, tincidunt sed nisl in, rhoncus varius eros. Ut tempor purus neque, vitae condimentum est hendrerit ut. Aenean eleifend lacinia hendrerit. Curabitur eu aliquam metus, id commodo sapien.

Using various of colors

Choose Colors
Basic $39/mo 256MB Memory 1 User 1 Website 1 Domain Unlimited Bandwidth 24/7 Support
POPULAR $59/mo 256MB Memory 1 User 1 Website 1 Domain Unlimited Bandwidth 24/7 Support
Premier $79/mo 256MB Memory 1 User 1 Website 1 Domain Unlimited Bandwidth 24/7 Support
Choose Colors
Cards
Default Light

Default Card!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

Background Colored Style

Background Colored Style

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.


Cards with Rich Media Content
alt text
alt text

Some Text!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

Some Text!
alt text

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

  • check OK
    • Some Action
    • Another Action
    • Disabled Action
    • Yet Another Action

Cards with Vertical Split Area

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

  • check OK
    • Some Action
    • Another Action
    • Disabled Action
    • Yet Another Action

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

  • check OK
    • Some Action
    • Another Action
    • Disabled Action
    • Yet Another Action
Action

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

  • check OK
    • Some Action
    • Another Action
    • Disabled Action
    • Yet Another Action
Action

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

  • check OK
    • Some Action
    • Another Action
    • Disabled Action
    • Yet Another Action

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.


Message Boxes
×

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

×

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

×

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

×

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Default - Light Hover
Light Filled
Light Hover Animation
Filled Hover Animation

Sizes
Default
North West Alt
North West
North
North East
North East Alt
West
 
 
East
South West Alt
South West
South
South East
South East Alt


Mouse follow
The Tip for this box will follow the mouse.
The Tip for this box will follow the mouse.


Mouse on to popup
North West Alt
North West
North
North East
North East Alt
West
 
The Tip for this box will appear on the right and you will be able to interact with its content.
 
East
South West Alt
South West
South
South East
South East Alt




Default


Default - with no backgrounds


With Material Buttons
Choose Colors
Default


With Navbar







ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ