background preloader

Simple Icon Hover Effects

Related:  Buttons / iconsPlugins/codes

Springy - A force directed graph layout algorithm in JavaScript. 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 From our sponsor: Create spectacular WordPress sites with ease. 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 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!

Customize checkboxes and radio buttons with iCheck (jQuery and Zepto) plugin 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

Bootstrap Markdown Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin Switch regular textarea within your form into Bootstrap-Markdown editor seamlessly by adding data-provide="markdown" attribute Code <form><input name="title" type="text" placeholder="Title?" Inline editing with Bootstrap-Markdown is done by adding data-provide="markdown-editable" attribute <div data-provide="markdown-editable"><h3>This is some editable heading</h3><p>Well, actually all contents within this "markdown-editable" context is really editable. Result This is some editable heading Well, actually all contents within this "markdown-editable" context is really editable. Beside using above data-attributes, you could call it via code Noted that Bootstrap-Markdown could be used as a standalone input (without any form). Some examples Custom width using data-width="400" attribute Hidden buttons using data-hidden-buttons="cmdBold" attribute

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

Related: