background preloader

Simple Icon Hover Effects

Related:  Buttons / iconsPlugins/codes

Dot Navigation Styles Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: <div class="dotstyle dotstyle-fillup"><ul><li class="current"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div> For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style. We define some common styles: Hope you enjoy these styles and find them inspiring!

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. 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: Which will of course depend on what we define as a common style in .btn and .btn-6. This class structure is used for demo purposes. I hope you enjoy the styles and find them inspiring!

100+ Free HTML5 Responsive Bootstrap Template in 2018 100+ HTML5 Free Responsive Bootstrap Templates in 2017 for Startups, Company, Business, Restaurant, Lawyers, Fitness, Gym, Hospital, Portfolio, Agency and others. We, The Themewagon Team gather more than 100 HTML5 free responsive Bootstrap template in 2017. Nowadays a website is a good medium for introducing. People can represent themselves or their organizations easily to the entire world through a website. Professional web developers are very rare. It is too much hard to seek out the suitable free HTML5 responsive Bootstrap templates. Hence, here’s a solution for you. Here, in this bundle, all templates are SEO friendly. Do you want more free responsive Bootstrap template? 150+ Best Free HTML5 Website Templates in 201641 Free High Quality Responsive Personal Portfolio Website HTML5 Bootstrap Templates 201726 HTML5 Bootstrap Free Responsive Templates for Fitness, Gymnasium, Hospital in 201730+ Free Responsive HTML5 Templates in 2017 for Restaurant, Cafe, Coffee Shop, Fast Food 01. 02.

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. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. Please note that we are working with a modern JavaScript library for manipulating our SVGs. The first thing we do is to create some SVG icons using an SVG editor like Inkscape. For each icon we want a special animation to happen. With the help of Modernizr we can define the fallback in our CSS: The PNG icons were generated with the fabulous iconizr tool. If you add the class “si-icon-reverse” to the span, the icon will be initially rendered with the reversed “shape”.

Circle Hover Effects with CSS Transitions A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. View demo Download source In today’s tutorial we’ll experiment with hover effects on circles. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Let’s define some common style for the list and the list items: Example 1

Introduction · jQuery Masonry Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Getting started Markup Masonry works on a container element with a group of similar child items. <div id="container"><div class="item">... Add jQuery and the Masonry script. All sizing of items is handled by your CSS. Script It is recommended you specify an itemSelector and columnWidth. That’s it! See Demo: Basic multi-column imagesLoaded plugin If your content contains any images, you’ll want to ensure that Masonry is triggered after all the images your content has loaded. See Demo: Images Code repository This project lives on GitHub at github.com/desandro/masonry. Acknowledgments Changelog v2.1: 9 Dec 2011 v2.0: May 2011 License

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. View demo Download source Today we’d like to share some fancy “check” animations for checkboxes and radio buttons with you. Please note that this is just a proof-of-concept and not a complete solution. For the custom checkbox or radio button we use the ::before pseudo-element of the label and we hide the input by setting the opacity to 0. Initially, we also add the necessary SVG elements after the inputs with JavaScript. Here is an example of a form structure: We are using an unordered list with the inputs and labels. The core styles for making the input invisible and creating the box out of the pseudo-element is the following: We noticed a small glitch for the last example in Firefox (24.0) on Mac.

Shape Hover Effect with SVG In this tutorial we'll recreate the hover effect as seen on The Christmas Experiments website. We'll be using SVG for the shape and Snap.svg for animating it on hover. View demo Download source If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using borders and today I would like to show you how to achieve the same effect using SVG and Snap.svg. The illustrations used in the demos are by talented Isaac Montemayor. So, let’s get started! The Markup What we’ll do first, is to draw two shapes in a vector graphics editor like Adobe Illustrator or Inkscape. The “d” (path data) value is what you are looking for. For the markup we’ll have a section with the class “grid” which contains figures wrapped in anchors. The SVG will have the respective viewBox values for the graphic and a preserveAspectRatio of “none”. The CSS

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. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. Please note that the examples only serve as inspiration, they are dummies and not meant for production. We mostly just use one division and an example for an effect is the following one where we expand a slit to fill all the page from the center: Some browsers don’t support transitions or animations on pseudo-elements, so some of the effects in the demo won’t be animating. The SVG pie timer was made by Anders Grimsrud.

Related: