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!
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
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