Discover codrops/ButtonHoverStyles Open Source project

1

PageTransitions

A showcase collection of various page transition effects using CSS animations.

CSS

2,158

2

SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

CSS

1,592

3

HoverEffectIdeas

Some inspiration and modern ideas for subtle hover effects.

CSS

1,555

4

RainEffect

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

JavaScript

1,535

5

Animocons

Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"](https://dribbble.com/shots/2527200-Like-Animation) by Daryl Ginn.

JavaScript

1,529

6

ParticleEffectsButtons

A little library that can be used for bursting particles effects on buttons and other elements

JavaScript

1,223

7

SeatPreview

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.

HTML

1,175

8

DistortedButtonEffects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.

CSS

1,119

9

ModalWindowEffects

A set of experimental modal window appearance effects with CSS transitions and animations.

JavaScript

998

10

TextInputEffects

Simple styles and effects for enhancing text input interactions.

CSS

965

11

BookBlock

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

HTML

962

12

NotificationStyles

Various simple ideas and effects for unobtrusive notifications on a website.

CSS

929

13

ElasticProgress

Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

JavaScript

875

14

LineMenuStyles

An open collection of menu styles that use the line as creative design element.

CSS

745

15

MultiLevelPushMenu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

JavaScript

735

16

CreativeButtons

Some creative and modern button styles and effects for your inspiration.

CSS

734

17

FullscreenLayoutPageTransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

JavaScript

726

18

IconHoverEffects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

CSS

720

19

CreativeLinkEffects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.

CSS

720

20

Interactive3DMallMap

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.

HTML

713

21

ResponsiveMultiLevelMenu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

HTML

700

22

OffCanvasMenuEffects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

CSS

682

23

CSSGlitchEffect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

CSS

675

24

Calendario

A jQuery calendar plugin for creating flexible calendars.

CSS

670

25

PageLoadingEffects

Modern ways of revealing new content using SVG animations.

CSS

636

26

ProgressButtonStyles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

CSS

606

27

MinimalForm

A simplistic form with inputs shown one at a time. Inspired by the form seen on the end of the [PageLanes website](http://www.pagelanes.com/).

JavaScript

600

28

ButtonComponentMorph

Inspiration for revealing content by morphing the action element.

HTML

590

29

DragDropInteractions

Some inspiration for drag and drop interactions for the modern UI.

HTML

579

30

ImageTiltEffect

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

HTML

573

31

BlockRevealers

Ideas for revealing content in a schematic box look as seen around the Web lately.

HTML

556

32

FullscreenForm

An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.

CSS

542

33

SelectInspiration

Creative styles and ideas for custom select elements.

CSS

540

34

SegmentEffect

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

HTML

534

35

AnimatedSVGIcons

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

JavaScript

524

36

FullscreenOverlayStyles

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

CSS

498

37

GridLoadingEffects

Some inspiration for loading effects of grid items using CSS animations.

HTML

495

38

StackMotionHoverEffects

Experimental hover effects that reveal a stack of multiple colored cards behind the hovered item.

HTML

490

39

MagneticButtons

A set of buttons with a magnetic interaction and a hover effect.

JavaScript

472

40

Blueprint-VerticalTimeline

A responsive vertical timeline layout with icons and example media queries.

CSS

465

41

SlitSlider

A responsive slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

CSS

461

42

LiquidDistortion

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP

JavaScript

447

43

AnimatedHeader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

HTML

446

44

SimpleDropDownEffects

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

HTML

445

45

ClickEffects

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.

CSS

438

46

Slicebox

Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don't support the new properties.

JavaScript

437

47

GridLoadingAnimations

Some inspiration for loading effects on grid items.

HTML

421

48

ImageRevealHover

A set of link hover effects that reveal a thumbnail in different creative ways.

JavaScript

414

49

ProximityFeedback

Some ideas for proximity feedback through progressive hover effects.

HTML

412

50

TiltHoverEffects

Some ideas for hover effects with a fancy tilt effect. Inspired by the effect seen on Kikk 2015.

HTML

410

51

CaptionHoverEffects

A tutorial on how to create some subtle and modern caption hover effects.

JavaScript

405

52

Baraja

Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

JavaScript

398

53

DirectionAwareHoverEffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

HTML

397

54

GammaGallery

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

JavaScript

393

55

AnimatedGridLayout

A responsive, magazine-like website layout with a grid item animation effect when opening the content

HTML

387

56

TooltipAnimations

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.

JavaScript

385

57

Blueprint-SlidePushMenus

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.

CSS

371

58

GridMenu

A CSS Grid powered menu with a box look and a sliding animation.

HTML

368

59

Elastislide

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images

JavaScript

364

60

MorphingBackgroundShapes

A decorative website background effect where SVG shapes morph and transform on scroll.

HTML

360

61

ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

JavaScript

357

62

PerspectivePageViewNavigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.

CSS

346

63

MusicalInteractions

Some experimental ideas for playful musical interactions powered by MIDI.js.

JavaScript

341

64

GradientTopographyAnimation

Shape layers animation based on Polar Vector's work "Gradient Topography"

HTML

336

65

LineHoverStyles

A couple of simple & subtle line hover animations for links using CSS only.

CSS

334

66

SmoothScrollingImageEffects

A small set of ideas on animating images and other elements while smooth scrolling a page.

JavaScript

333

67

AnimatedResponsiveImageGrid

A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

HTML

324

68

DecorativeLetterAnimations

Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.

HTML

323

69

GoogleNexusWebsiteMenu

A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.

JavaScript

323

70

CircularProgressButton

Implementation of Colin Garvin's [submit button concept](http://dribbble.com/shots/1426764-Submit-Button)

CSS

319

71

CreativeGooeyEffects

Practical examples of how to apply the Gooey effect by Lucas Bebber

HTML

317

72

GridLayoutSlideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

HTML

306

73

MenuHoverEffects

Some inspiration for menu hover effects.

HTML

306

74

InteractivePoints

An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.

HTML

301

75

DialogEffects

A collection of dialog effects using CSS (and SVG) animations.

HTML

301

76

NaturalLanguageForm

An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.

CSS

300

77

DiagonalSlideshow

A slideshow with a diagonal look and a content preview

JavaScript

299

78

ScrollBasedLayoutAnimations

An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.

HTML

291

79

TypeShuffleAnimation

A shuffling type animation based on the effect seen on LCD 1.

JavaScript

290

80

ElasticSVGElements

Adding elasticity with SVG shape animations for enhanced UI interactions.

CSS

288

81

OnScrollTypographyAnimations

Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.

JavaScript

287

82

SmoothScrollAnimations

Demo of a tutorial on how to add smooth page scrolling with an inner image animation

JavaScript

286

83

PagePreloadingEffect

A simple page preloading animation based on the effect seen on [Fontface Ninja](http://fontface.ninja/)

CSS

278

84

SlideshowAnimations

A collection of ideas for slideshow animations.

JavaScript

277

85

AnimatedFrameSlideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides.

JavaScript

274

86

AnimatedBorderMenus

A tutorial on how to create a off-canvas icon navigation with an animated border effect.

CSS

273

87

SearchUIEffects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

HTML

269

88

InteractiveColoringConcept

A fun experimental coloring concept where a color droplet can be dragged from a palette and dropped on designated areas in a website mockup.

HTML

269

89

Stapel

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

JavaScript

266

90

MorphingSearch

A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.

CSS

259

91

GridLayoutMotion

A retro-style grid layout with a playful motion hover effect on the grid items.

HTML

246

92

MotionBlurEffect

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG filter.

HTML

238

93

GridGallery

A responsive grid gallery based on the [Google Chromebook getting started](https://gweb-gettingstartedguide.appspot.com/) guide gallery. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items.

HTML

234

94

ScrollingLettersAnimation

A switching title effect where a fixed element changes depending on the scroll position.

HTML

231

95

MultiLevelMenu

A simple menu with multiple levels and an optional breadcrumb navigation and back button.

JavaScript

228

96

ButtonStylesInspiration

Some ideas for modern and subtle button styles and effects

CSS

222

97

OnScrollEffectLayout

An on scroll effect template that animates the sides of sections once they are in the viewport.

JavaScript

222

98

ScrollSpiral

WebGL Scroll Spiral

HTML

217

99

FolderPreviewIdeas

Some ideas for interacting, previewing or just playing with folders on hover

HTML

216

100

ExpandingGridItemAnimation

Grid item animation based on the Dribbble shot "Surf Project" by Filip Slováček.

JavaScript

216

codrops/ButtonHoverStyles

codrops

Reviews

Repository Details

CSS Button Hover Styles

Misc

License

More Repositories