background preloader

Creative Button Styles

Creative Button Styles
Some creative and modern button styles and effects for your inspiration. View demo Download source Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes. The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app. Please note: this only works as intended in browsers that support the respective CSS properties. The markup of a button is really simple. <button class="btn btn-6 btn-6d">Button</button> The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. An example for a specific button style is the following:

https://tympanus.net/codrops/2013/06/13/creative-button-styles/

Related:  HTML - CSS - PHPButtons / iconsPlugins/codes

Ideas for Subtle Hover Effects Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. View demo Download source It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. Creative Link Effects An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. View demo Download source Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Please note that pseudo-element transitions don’t work in every browser.

PFold: Paper-Like Unfolding Effect A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified. View demo Download source Creative Loading Effects Some ideas and inspiration for loading effects on a website. View demo Download source Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube.

Tab Styles Inspiration A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques. View demo Download source Today we’d like to share a couple of tab styles with you. Animated Checkboxes and Radio Buttons with SVG By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected. Arrow Navigation Styles Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects. View demo Download source Today we’d like to share some inspiration for arrow navigation styles with you. There are so many creative ways of showing those little elements that are an essential part of many websites nowadays. You can find them in content slideshows, as part of the page navigation, in image galleries and many more. These indicators are mostly represented as arrows that point to the left and right.

Progress Button Styles 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. View demo Download source Today we’d like to share some progress button styles with you. You surely know “Ladda” by Hakim El Hattab, a UI concept that indicates progress directly on the button that invokes a loading action. Some of the buttons have a built-in progress bar and today we’d like to explore that idea with some creative progress button styles. Using perspective will allow us to create some fun 3D effects besides the flat “filling” styles.

Slide and Push Menus 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. View demo Download source A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML Animated SVG Icons with Snap.svg 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. View demo Download source SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons.

Related: