With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions.

With that in mind, let’s take a look at some examples of borders that are further enhanced with the best that CSS (and maybe a little JavaScript) have to offer.

The post 8 CSS Code Snippets for Creating Stunning Border Effects appeared first on Speckyboy Design Magazine.

In that way, a button click is sort of like the successful conclusion designers are trying to draw us to. That’s why it’s so important to choose buttons that both look great and provide obvious visual cues.

With that in mind, we’ve found a collection of CSS button libraries that you can use to drive interaction on your own web projects. Enjoy!

bttn.css

bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes, and colors.

All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight.

Buttons Collection

The title may be simple, but Buttons is a library with over 20 collections of styles to choose from.

Standouts include the slightly-glassy Delta, the fun and sassy Theta, the roomy and minimal Mu, and keyboard-like Phi. Be sure to check out the ultra-cool click effects in the demo.

Sass & Compass Buttons

Not to be confused with the other library called, ahem, Buttons. This library contains simple and attractive CSS buttons in a variety of shapes. Extra goodies include icon button styles that utilize FontAwesome.

Pushy Buttons – Pressable 3D Buttons

Pushy Buttons may not be the fanciest set you’ll find, but they’re colorful and easy to spot in a crowd.

Plus, they provide an oddly-satisfying bounce when clicked. In the end, isn’t that all we really need from a button?

btns.css Framework

Personally, I like buttons that make use of smooth CSS transitions. btns.css does a great job with subtle color transitions on hover and even versions that will expand and contract size.

Press.css Library

Press.css provides great-looking flat buttons in whatever size, shape, and color you need. With only three included effects, code size is kept to a minimum (12kb). They also work swimmingly with FontAwesome icons.

CSS Button Hover Effects with FontAwesome

Hovering on a button activates a smooth CSS transition that brings a FontAwesome icon into view – either alongside or in place of text. Part of a great CodePen collection of CSS buttons.

Social Buttons for Bootstrap

Social Buttons for Bootstrap combine the goodness of the Bootstrap framework with FontAwesome icons. All the big social media networks are included, over 20 in all.

There are classes for each network, along with classes for different sizes. Colors are made to match each respective service.

beautons Button Toolkit

beautons is a button library that’s all about simplicity. Choose from various sizes, styles, and button states. CSS classes can be combined to mix and match different styles.

Obvious Buttons

Built using LESS, Obvious Buttons are colorful, attractive, and easy to customize. They also provide a simple animated effect when clicked.

Chunky 3D Web Buttons

Orman Clark’s Chunky 3D Web Buttons is not just a collection of sexy buttons. It’s also a full-blown tutorial demonstrating how they were made. So you can start with the basics and go on to add your own touches.

Radioactive CSS Buttons

What separates Radioactive Buttons are the interesting hover effects that can be added in. For instance, hovering can result in a subtle pulsating color change (as if the button really were radioactive).

This is done through looping a CSS transition a set number of times. The result is a fun, attention-grabbing button.

It’s All About Those Clicks

Buttons can often be a bit overlooked when putting together a website. After all, they generally don’t take up much screen real estate and are not the most exciting design element. Still, utilizing the right one can draw attention and encourage a click.

Note how several of the libraries above use interesting hover and click effects. These types of effects can bring a bit of functional fun to buttons and improve the overall UX.

Next time you’re designing a website or working on a call-to-action (CTA), think about buttons as more than just a simple design element. Think of them as the gateway to your sites’ goals.

Using one of the libraries featured above really can make a difference in your conversion rates.

The post 10 High-Quality Free CSS Button Libraries & Frameworks appeared first on Speckyboy Design Magazine.

Social media services, retailers, and even Google Maps provide them for completing all sorts of otherwise-mundane tasks. They represent an easy way to make things fun and keep users engaged.

Badges can also produce some exciting examples of design. They can be anything from a plain graphic to a fully-animated experience. Plus, they challenge us to see how much goodness we can fit into a small space.

Today, we’ll check out some of the creative CSS and JavaScript bling that web designers can bring to badges. We’ll cover a variety of styles and levels of complexity. You won’t earn any badges for browsing, but at least you’ll get some inspiration!

That’s So Font Awesome by Olivia Ng

Font Awesome icons are a perfect centerpiece for a badge. With the number of available icons, you can create one around literally any subject. Here we have some beautiful hexagon-shaped badges that include the popular font icon library. They’re incredibly slick and colorful, and it makes you want to collect them all.

See the Pen Hexagon Badges with Font Awesome icons by Olivia Ng

Ever Been to Berlin? by Antoinette Janus

There is a simple beauty in this Berlin skyline badge. First, the retro gradient color scheme looks like it would make for a terrific t-shirt. Then there are the subtly animated features that bring a sense of calm. The attention to detail makes it all come together.

See the Pen Dribbble Recreation:Berlin Badge by Antoinette Janus

No, But I’ve Been to Tatooine by LukyVJ

While this example is a few years old, it holds up really well (as does everything Star-Wars related). Again, the designer chose simplicity rather than jamming it full of extras. But the result is still compelling. Plus, the included “Night Mode” makes for a cool change of scenery.

See the Pen Tatooine Badge by LukyVJ

It’s a Material World by Rasmus Bergström

Google’s Material Design has become a pretty big hit with designers. Here, we see a “verified” badge inspired by the design language. It shows great color and depth, making this example very easy on the eyes.

See the Pen Material design verified badge by Rasmus Bergström

Everyone Gets a Gold Star by Joey Hoer

One of the simplest pleasures of school was earning a coveted gold star sticker on a test. This snippet provides a fun online equivalent. Each star does its own little dance as you hover over it. No matter how old you get, you still want to collect those stars.

See the Pen SCSS Star Badges by Joey Hoer

I am Holographic Batman by Pixelmort

Who doesn’t want to be Batman (other than The Joker)? If you don’t get to be a caped crusader, earning this badge would be the next best thing. It sports a nice “hologram” effect as you move your cursor over the symbol. This is an excellent take on those old 3D stickers that were sold in vending machines.

See the Pen Batman holographic badge 🦇 by pixelmort

You’re an Explorer by Chris Johnson

Designed as a way to reward those who contribute to an online community, this spaceship badge is more than meets the eye. Hover over it, and the spaceship takes flight, complete with an alien pilot. The look is modern, crisp, and detailed.

See the Pen Contributor badge flip exploration by Chris Johnson

A Compelling Landscape by Christine Clark

Here’s a travel-inspired badge that is great fun and well put together. It starts out relatively blank, and then animation fills in the various components. It’s a different approach than others in this collection but is effective in grabbing a user’s attention.

See the Pen Landscape Badge CSS Animation by Christine Clark

Gamifying the Web

As silly as it may sound, earning a badge can evoke a smile and provide a tiny bit of satisfaction. There’s definitely an emotional effect that keeps us coming back for more.

In some cases, it may even be healthy. Setting small, achievable goals is a realistic path to success, and badges can play a role in helping us get there.

In terms of design, badges afford us the freedom to have fun – because that’s part of their purpose. We have permission to create something that can brighten someone’s day. There are no hard-and-fast rules.

Hopefully, the examples above inspire you to let your imagination go wild. Go ahead, you’ve earned it.

The post 8 CSS & JavaScript Snippets for Creating Gamification Badges appeared first on Speckyboy Design Magazine.

Sometimes, though, it all looks and feels like cheesy marketing talk that’s been both written and designed by someone detached from reality. They might even convince you to do the exact opposite of the intended action.

So, what makes a good CTA? Here are 10 examples of Calls-to-Action that are well-designed, cleverly written or just plain unique.

MailChimp

Full disclosure – I think MailChimp does as good a job with their CTAs as anyone. In fact, there were a number of instances on their site to choose from. But, my absolute favorite is their “Prepare for Launch” dialogue for sending out a mail campaign.

Even if there were no text, the animated chimp hand hovering above the red button alone lets you know what you’re supposed to do. It’s simple, fun and I feel a strange sense of accomplishment when I click the “Send Now” button.

ManageWP

ManageWP has made the bulk of their home page a CTA. The headline and brief descriptive text tell you exactly what their service does and simply asks for an email address to get started. The visuals are interesting and the content is right to the point.

Blue Apron

Checking out Blue Apron’s site, their home page really is a series of CTAs. I love this particular section because it conveys what you’re getting and how much it costs in an easy-to-read format.

Even the little Free Delivery icon is a nice touch. Best of all, they used a background of fresh food ingredients to drive the point home. Who’s hungry?

Spotify

Like Blue Apron above, Spotify features a background of its main selling point in its CTA. But they take a decidedly simpler approach the rest of the way.

This slider highlights a few important things about the streaming music service, but mostly encourages you to click or scroll for further detail. It doesn’t try to wow you – just make it easier for you to sign up or learn more.

Zillow

Zillow is the place to go for all things related to researching real estate. And right from the start, you’ll find a CTA area that lets you do all the things. It’s all right there, without the need to search around. This is as useful as a call can get.

B&O Play

An offshoot of Bang and Olufsen, B&O Play carries on the minimalist design and branding of its parent. And this Call-to-Action is a perfect example. You get a big dose of beautiful industrial design, along with calls to see the featured collection or start the process of buying these slick headphones.

While it’s easy to look at this and say, “It looks nice enough, but so what?” the point is that you should treat CTAs as an important part of your overall brand. They should reflect who you are and what you do.

Mercy Corps

When you’re tackling some of the world’s most difficult situations, there’s no time to waste. Mercy Corps creates a sense of urgency with their CTA. The photo, coupled with a bold, serious headline ensures that visitors understand the gravity of it all.

They’re helping us to see the people affected, and providing us with a way to respond.

Nest

Home automation masters Nest bring the message of Earth Day and tie it in perfectly with their energy-saving thermostat.

The twinkling stars in the background coupled with the larger-than-life product shot really make an impact (it makes me think of a planet floating in space). What’s also nice here is that they allow the background some room to breathe.

Skagen

Skagen is a Danish company that sells minimalist watches, along with other fashion accessories. This CTA features an outstanding use of color and brand-appropriate simplicity. The lesson here is that, when you have a unique product, just let it speak for itself.

Patagonia

Patagonia is all about the experience of being outdoors. Their home page slider is a mix of products and causes – like this beautifully crafted image promoting an environmental film.

The images are big, bold and they aim to bring a little bit of the wild to your screen. It’s right on point with their target audience.

Calling for Clicks

A good CTA should consider the audience and the desired result of a user interaction. Color and imagery should be a reflection of your brand and help to convey the message. Motion is great, so long as it’s not outlandish. Text should be short and to the point.

The Calls-to-Action above all do a great job of guiding the user in a fairly simple manner. It goes to show that you don’t need something overly wordy or complicated to convince people to act.

The post 10 Outstanding Examples of Call-to-Actions Buttons for Inspiration appeared first on Speckyboy Design Magazine.

That’s why we’ve curated this small collection of custom sharing buttons you can format and reuse on your own site. If you’re looking for beautiful sharing buttons these templates offer a great starting point.

1. Side Sharing

First up is one of my favorite techniques created by developer Michael Schofield. This fixed side-sharing social badge UI is really common on big blogs and magazine sites.

These social badges can either remain positioned at the very top near the headline or they can scroll down with the user. I haven’t found any case studies comparing the differences but I’d imagine the fixed buttons do see higher share counts. And either way they’re so well-designed that they don’t look spammy or shoehorned into the layout.

This is probably the best template to start with if you run a blog and want some custom sharing badges.

2. Image Buttons

Another popular sharing style is reposting images found on a website. This is popular with Pinterest but can work well for Facebook and Twitter, and even Google+ as well.

These image buttons are custom designs using pure CSS3 and some background logos for each one. They do not connect to any social networks yet, but the anchor links can easily be programmed for social sharing.

The design is really my focus here because they look phenomenal attached to any image. Plus the location really gives away the idea that you’re trying to encourage shares of the image itself, not just the post.

3. Toggle Shares

We’ve all seen those WordPress sharing widgets using the small sharing icon and flyout menu. After a while they can get stale, so it helps to mix it up a bit.

With this snippet you can restyle your social sharing with a custom animation and hidden menu. It’s perfect for anyone with a site that wants to encourage lots of sharing across multiple networks.

Each icon ihas been designed in pure CSS and the animation is controlled via jQuery. You should be able to just copy/paste this into any layout and get it working. It’d fit well right neaxt to an article’s headline, or even at the bottom after people finish reading. Either way it’s sure to increase social shares across the board.

4. Circle Animations

For a bit of fun animation check out these circle buttons created by Stéphane Lyver.

Each button has its own hover-to-animate effect and they can all blend perfectly into any layout. You could even change the background and icon colors so they stand out against a plain white background.

The whole thing runs on pure CSS and the icons are pulled from Font Awesome via Bootstrap.

Note that these buttons also do not connect directly to social sharing links but this can be fixed easily with the right code.

5. Simple Sharing Buttons

Short, sweet and to the point best describes these sharing buttons.

They use simple SVG icons from the Ionicons icon set. But you don’t need Ionic or any JavaScript to get these working.

Instead they use the href value along with new tab options to open sharing links right in the browser. No JavaScript required, no clunky SVGs required.

If you dig into the Ionic iconset you can even find other social icons you might want to add. Plus you have full control over the styles in CSS so you can change the size, padding, font color and pretty much everything else.

6. Hidden Socials

Developer Chris Sevilleja created these hidden social buttons all with pure CSS.

Some websites use this technique to embed default sharing badges inside smaller icons. But admittedly this is a unique animation so it’s not a super common trend.

The code is real easy to setup and it all runs through CSS so you have full control. Chris even developed a similar pen for Google+ social badges.

Both code snippets are fanastic for pretty much any website and the animations run in all CSS3-compliant browsers.

7. Hover Background Colors

Now here’s a really unique social sharing setup where the background color changes based on which button you hover.

Each button has its own custom icon pulled from Font Awesome so you can even expand this set to include other related icons. I also really like this approach because it does have the JavaScript fallback for the hover changes.

But web developer Christopher Grabinski created a pure CSS alternative that works exactly the same(in supported browsers).

I don’t think this technique would look great on a larger blog, although it may work on smaller sites or short blog posts.

8. Flyout Sharing

Developer Kyle Lavery built an amazing flyout share button that’s reminiscent of Google’s approach to material flyouts.

This does use a little JavaScript but it’s only 5 lines and not very complex. The animation magic is in the CSS which you can customize to suit your needs.

What’s also interesting is the raw HTML is insanely simple. It has one main share container and then uses div elements for the buttons. Basically 5 lines of HTML and 5 lines of JavaScript, mixed with a whole bunch of CSS, gives you this lovely effect.

Absolutely one of the coolest social sharing features I’ve seen and the material design style makes it even cooler.

9. 3D Sharing Buttons

Last in my collection is this 3D design using CSS 3D transforms alongside social buttons.

Developer Fabrizio Bianchi created these buttons using pure CSS from the icons to the transform animations. The main icons are from Font Awesome and the only JS code is for embedding the buttons inside.

But overall this is a pure CSS solution that should work well on any site. Not everyone likes the 3D effect but if it suits your design then go for it.

The post 9 CSS & JavaScript Snippets for Creating Social Sharing Buttons appeared first on Speckyboy Design Magazine.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.

Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.

Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.

Knopf.css – A modern, modular, extensible CSS button system.

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.

LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.

CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.

pattern.css – A CSS-only library for adding background patterns to your projects.

98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.

Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.

MVP.css – A minimalist stylesheet for HTML elements.

MoreToggles.css – A pure CSS library that provides you with stylish toggles.

Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.

OrbitCSS – Check out this modern CSS framework based on flexbox.

Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.

mono/color – A small, responsive, dual-themed CSS-only framework.

new.css – A classless CSS framework for building HTML-only websites.

Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.

Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.

Griddle – A modern CSS framework built with CSS Grid and Flexbox.

Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.

Layoutit Grid – Build your ideal CSS Grid with this online tool.

Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.

CSS Effects – A collection of click-to-copy CSS special effects.

Capsize – An online tool for defining typography in CSS.

CSS Background Patterns – Generate your own seamless background pattern.

Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.

Keyframes.app – Generate awesome CSS animations with this web-based tool.

Gradihunt – Find or generate the perfect CSS gradient for your projects.

CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.

Neumorphism.io – A tool for creating Soft-UI CSS code.

700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.

Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.

BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.

A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.

Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.

Selectors Explained – Translate CSS selectors into plain English.

Useful CSS Items

What Does 100% Mean in CSS?

CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.

Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.

Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.

The CSS Cascade – Learn how web browsers resolve competing CSS styles.

What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?

Favorites from Previous Years

• Our Favorite CSS Libraries, Frameworks and Tools from 2019
• Our Favorite CSS Libraries, Frameworks and Tools from 2018
• Our Favorite CSS Libraries, Frameworks and Tools from 2017
• Our Favorite CSS Libraries, Frameworks and Tools from 2016
• Our Favorite CSS Libraries, Frameworks and Tools from 2015
• Our Favorite CSS Libraries, Frameworks and Tools from 2014
• Our Favorite CSS Libraries, Frameworks and Tools from 2013

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.

CSS Frameworks

Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you.

xstyled – A consistent theme-based CSS for styled-components.

Fomantic-UI – A free, “human-friendly” development framework for creating responsive websites.

Raster – A simple CSS Grid system that utilizes descriptive HTML.

Diez – A free, open-source design language framework.

Butter Cake – Check out this modern, lightweight CSS framework.

CSS Libraries

Destyle.css – An “opinionated” CSS reset library.

Immutable Styles – A library for styling web interfaces with a focus on predictability and robustness.

Matter – A collection of Material Design components in pure CSS.

Water.css – Simple styles and semantic code for your static website.

Flexbox Case Studies – Tutorials to help you achieve common Flexbox layouts.

IsometricSass – A Sass library for creating isometric 2D without JavaScript.

css-fx-layout – A lightweight CSS Flexbox library that includes both classes and HTML data attributes.

a11y-css-reset – A set of global CSS rules to help improve the accessibility of your projects.

augmented-ui – A tool for creating “futuristic, cyberpunk-inspired UI” with CSS.

CSS Animation

CSS Wand – Copy, paste and customize a variety of useful animation styles.

CSSFX – A collection of animated CSS buttons, hover effects, inputs and loaders for use in your projects.

CSSeffectsSnippets. – A collection of handy CSS animations that you can copy and paste.

useAnimations – A free CSS library of icon-based microinteractions.

extra.css – Use this CSS Houdini library to add stunning effects.

Izmir ImageHover CSS Library – A mini CSS library built by Ciaran Walsh for quickly creating beautifully animated image hover elements.

CSS Animo – A collection of copy & paste CSS animation effects.

CSS Typography

CSSans Pro – A free colorful and sassy font.

RFS – A responsive font size engine that automatically calculates sizing based on browser viewport.

Typetura – A tool for fluid typesetting, based on screen size.

Interactive Typography Cheatsheet – A fun tool for learning the various components of a letterform.

TypeSafe CSS – A tiny (under 1KB) responsive CSS framework with a focus on reading and writing.

Fontsmith Variable Fonts – Learn about this much-hyped development in typography – complete with examples.

Font style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.

Fontanello – A browser extension that displays typographic styles via right-click.

GooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items.

CSS Tools & Generators

Flexulator – An interactive CSS Flexbox space distribution calculator.

CSS Grid Layout Generator – Create complex grids with this visual tool.

branded. – A free tool for creating and maintaining style guides.

CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.

Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

Gradient Generator – Take two colors and create a variety of custom CSS gradients.

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

Amino – A live CSS editor for Google Chrome.

CSS Learning Guides & Cheatsheets

CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.

Relearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.

CSS Guidelines – A detailed document to help you write more scalable and manageable CSS.

The Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.

CSS Layout – A collection of popular CSS layouts and patterns.

Flexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

CSS Inspiration

Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.

And, finally…

CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.

Our CSS Snippets Collections

• 10 CSS Animated Underline Text Effects Snippets
• 10 Advanced Image Hover Effects Snippets
• 8 Tip-Top Toggle Switch CSS Snippets
• 10 Character Designs Created Entirely With HTML & CSS
• 10 Incredible Examples of CSS, JS & SVG Logo Design
• 10 Examples of Unorthodox Shapes Created with CSS
• 9 Free Progress Bar JavaScript Plugins For Web Designers
• 8 Code Snippets That Demonstrate the Power of CSS Grid
• 10 Free CSS & JavaScript Select Box Snippets
• 8 Ways to Make the Search Field Sexy with CSS
• 9 Custom Open Source File Upload Field Snippets
• 10 Exciting CSS & JavaScript Page Transition Effects
• 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
• 10 Snippets for Creating Split Screen Layouts
• 10 Amazing CSS & JavaScript Text Animation Snippets
• 10 Amazing CSS Button Libraries & Collections
• Free Modal Window Libraries & Plugins

More CSS Resources

You might also like to take a look at our previous CSS collections: 2018, 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 appeared first on Speckyboy Design Magazine.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 100 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year (2018). No doubt, you’ll find something interesting!

Quick Jump: CSS Libraries, CSS Utilities, CSS Image Effects, CSS Layout Frameworks, Flexbox Frameworks, Web-Based CSS Tools, CSS Learning Resources, and CSS Snippets.

New CSS Libraries

WickedCSS Animations – A library of pure CSS animations.

Motus – An animation library that mimics CSS keyframes when scrolling.

ScrollOut – Detects changes in scrolling for reveal, parallax and CSS variable effects.

SimpleBar – Create cross-browser, custom scrollbars using pure CSS.

Repaintless.css – A lightweight CSS animation library.

Three Dots – A collection of loading animations – all with just 3 little dots.

Splitting – Library for animating text and grids with CSS variables.

Epic Spinners – A collection of CSS-only spinning icons with VueJS integration.

Boilerform – An HTML and CSS boilerplate to take the pain away from working with forms.

Micron.js – A micro-interaction library built on CSS and JS.

AnimTrap – A CSS & JavaScript framework for animations.

Pure HTML5 and CSS3 SVG Loaders – An attractive collection of loading images you can download for free.

CSS Utilities

basicScroll – A tool that allows you to change CSS variables depending on the scroll position.

Unused CSS – A tool that scans your website for any unused CSS selectors.

Purgecss – A tool that removes unused CSS from your site.

sanitize.css – This CSS library corrects broken and missing styles.

CSS Gridish – Build a Sketch file and CSS Grid code from your project’s specs.

OptiCSS – A template-aware CSS optimizer.

Mort – A tool for detecting “dead” CSS.

CSS Image Effects

Instagram.css – A complete set of Instagram filters in pure CSS.

Pure CSS Halftone Effect – How to create a mesmerizing effect with CSS.

CSS Glitch Effect – Mary Lou shares an experimental glitch effect powered by CSS animations and the clip-path property.

Direction Aware Hover Effects – Nifty CSS/JS hover effects based on the direction a user is coming from.

For more CSS-based image effects, take a look at this library collection.

CSS Layout Frameworks

Atomic Bulldog Grid – A CSS Grid layout, with partial fallback to Flexbox.

BuddyCSS – A simple CSS framework that aims to make development easier.

60GS – A 60-column CSS Grid starter kit.

Teutonic CSS – A modern CSS framework that weighs in at just 12KB.

ModestaCSS – A clean CSS framework that is both dark and responsive.

Flat Remix CSS Library – A set of predesigned elements that make for faster development.

FICTOAN – An intuitive SCSS framework that also moonlights as a UI kit.

Mustard UI – Billed as a CSS framework that “actually looks good”.

Material – This framework combines Bootstrap 4 with Google’s Material Design.

Smart CSS Grid – A minimal and responsive CSS Grid system.

Biomatic UI – A flexible atomic-focused CSS framework.

Tailwind CSS – A utility-first CSS framework for rapid UI development.

PaperCSS – The less formal CSS framework.

For more CSS layout frameworks, take a look at this collection.

CSS Flexbox Frameworks

Frow CSS – An open source HTML & CSS framework using Flexbox.

Cirrus – A responsive CSS framework that uses Flexbox.

Butter Cake – An open source CSS framework that is based on Flexbox.

Flexit – A simple and clean CSS Flexbox grid.

Strawberry – A light-weight CSS Flexbox framework.

Katana.scss – A CSS Flexbox-based layout system.

Flexible Grid – A framework that will help you implement CSS Flexbox.

For more flexbox resources, take a look at this article.

Web-Based CSS Tools & Generators

FlexBox Parent Attribute Visualizer – An interactive way to see the effect of various CSS Flexbox settings.

Fancy Border Radius Generator – A tool that goes beyond the basic rounded corners.

TinyEditor – Edit HTML/CSS/JS with this super-light app.

css-doodle – A web-based tool for drawing patterns with CSS.

Fonty – A tool for testing web fonts directly on a live website.

CSS Duotone Generator – Create an awesome, customized duotone image with HTML and CSS.

StyleURL – A tool that allows for making changes to CSS collaboratively.

Gradient Joy – Use gradients as placeholder images.

Font Playground – A place to play with variable fonts.

Keyframes.app – A web app and Chrome extension for creating CSS animations.

Visually Build Responsive Layouts with CSS Grid – A tool to help you build a responsive CSS grid.

CSS Alignment Cheatsheet – A nicely-illustrated guide to aligning all the things.

Clippy – An online tool you can use to create a CSS clip-path.

GradPad – An online to for creating CSS color gradients.

Trianglify.io – Generate custom low poly patterns in PNG or SVG format.

cssgr.id – An interactive CSS Grid generator.

Layoutit! – An interactive CSS Grid building tool.

Gradientify – A collection of top gradients with copy and paste CSS code.

Check out this article for a huge collection of free web-based CSS tools and generators.

CSS Learning Resources

Learn CSS Grid for free – A set of 14 interactive screencasts to take you from beginner to advanced.

CSS Layout cookbook – Access “recipes” for building common layouts.

Guidelines for Brutalist Web Design – Implementing brutalist design the right way.

Accessibility Cheatsheet – A handy checklist for ensuring your designs are accessible to all.

MODALZ MODALZ MODALZ – A guide for when to use modals (and when not to).

GRID – A visual cheatsheet for CSS Grid.

A11Y Style Guide – A living pattern library with an eye towards accessibility.

The Font Loading Checklist – A list to help you maximize performance and the user experience.

What is Modular CSS? – A detailed guide writing CSS at scale.

Learn Flexbox – Online tool that demonstrates the various properties of CSS Flexbox.

Hot Tips CSS – A curated selection of CSS snippets to enhance your projects.

CSS Cheat Sheet – A well put together reference of CSS properties.

Front-End Design Checklist – An exhaustive list of elements to help you ensure quality in design.

Grid to Flex – CSS Flexbox fallbacks for projects using CSS Grid.

Component Based Design System With Tachyons – Introduction to a functional CSS framework / design system.

30 Seconds of CSS – A curated collection of useful CSS snippets you can understand in 30 seconds or less.

100 Days CSS Challenge – Create something unique and sharpen your skills.

How CSS works: Understanding the cascade – Learn one of the true fundamentals of CSS for more efficient code.

Manageable Utility Systems with CSS Variables – A look at the difference between Sass variables and new CSS variables.

Cool CSS Creations

Piano Keyboard – Thanks to this CSS/JS site, you can play piano on your keyboard or mouse.

CSS Snake & Ladders – A multi-player game developed with HTML and CSS.

Solar System Explorer in CSS – View this simulation, built without a single bit of JavaScript.

Pure CSS Francine – A HTML/CSS rendering of an 18th-century oil painting.

Air Bomb – A fun game written with pure CSS (no JS required).

Our CSS Snippets Collections (2018)

• 10 CSS Animated Underline Text Effects Snippets
• 10 Advanced Image Hover Effects Snippets
• 8 Tip-Top Toggle Switch CSS Snippets
• 10 Character Designs Created Entirely With HTML & CSS
• 10 Incredible Examples of CSS, JS & SVG Logo Design
• 10 Examples of Unorthodox Shapes Created with CSS
• 9 Free Progress Bar JavaScript Plugins For Web Designers
• 8 Code Snippets That Demonstrate the Power of CSS Grid
• 10 Free CSS & JavaScript Select Box Snippets
• 8 Ways to Make the Search Field Sexy with CSS
• 9 Custom Open Source File Upload Field Snippets
• 10 Exciting CSS & JavaScript Page Transition Effects
• 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
• 10 Snippets for Creating Split Screen Layouts
• 10 Amazing CSS & JavaScript Text Animation Snippets
• 10 Amazing CSS Button Libraries & Collections
• https://speckyboy.com/free-modal-window-libraries-plugins/

More CSS Resources

You might also like to take a look at our previous CSS collections: 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.

The post Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018 appeared first on Speckyboy Design Magazine.

Many different factors go into creating a successful call to action button and the difference between a hit or miss can be as subtle as the shade of color you choose or even the font.

So where do you start? Check out these quick, yet effective pointers that will help get you on your way:

What type of online pages have call to action buttons?

Call to actions are traditionally associated with landing pages. However, capturing the attention of potential customers is vital in many other places, such as websites, email newsletters, videos and even blog posts. Just because you have already converted visitors into leads by signing them up for a webinar, doesn’t mean you can’t continue to market additional related content to them, like a free consultation. The most effective practice is to continue the conversation with customers by offering them further services or a free trial of a product.

A website homepage, as a most frequently visited page, presents a huge opportunity to drive traffic to a specific location. In many instances, a homepage should have more than one call to action, to drive different desired actions for separate target audiences.

Moreover, a website should have uniform call-to-actions spread across all web pages in order to increase the chances people will take another step through the door.

Words that matter

A button that entices people to click has to be a short and concise phrase, with no information clutter. For example:

“Click to find out on how you can get up to 50% off of home insurance”

The above is a little bit too much information. If your website or ad copy explains clearly what you offer, all your call-to-action button needs to say is:

“Get it here”

Many marketers like to add a sense of urgency into their CTA buttons, using words like “quick,” “today,” and “now.” These words call for immediate action, and reinforce the notion that clicking the button will provide a benefit institently. However, it’s also important to make the call to action button fit within the context of the site. For some target audiences, a phrase like “Buy Now” may be too aggressive. Make sure the language you use is suitable for your target audience.

Most importantly, let your potential customers know exactly what they’re going to achieve by clicking on a button, whether it’s “Add to Cart,” or “Free Download” make sure they have no surprises when they get to the next page. A call to action button that doesn’t properly tell the user where she’s going will result in a high bounce rate.

Lastly, be SEO aware. In order for search engines to read your buttons, they should contain readable text via CSS3, and add keyword rich alt tags, it’s important to avoid using a simple image replacement.

Size and color

In our present information packed world, users most often scan through pages with their eyes, without putting too much effort into reading. If they see something that could be valuable while scanning, they’ll put in the extra time to stop and read.

This means we have to emphasize the content we want the users to notice. The bigger your call to action is, the more likely it is that people will stop to see what you offer.
The colors you use should be bold and contrasting, making sure your button appears clickable.

Placement

It’s never just about the button – the entire “environment” where you place it is critical.

Eyetrack studies shows that the eye’s path tends to start in the upper left area of a page. It’s also dictated by simple logic. In the English language, we start reading from left to right and from top to bottom. This would be the best location for your most critical content, or the content you want the user to see first.

The call to action should be placed above the fold, and make sure the button stands out by giving it some white-space, making the area appear uncluttered.

The post The Science of Buttons: How to Get People to Click appeared first on Speckyboy Design Magazine.

You will find not a selection of the latest innovative CSS techniques (there are some) in this article, merely a collection of tools, resources, and downloads that web designers can use for solutions to everyday CSS design and coding solutions.

The resources below have been split into four categories: CSS Download Packages (all of the CSS resources offer multiple variations of each technique), Downloadable CSS Tools (the resources within this category offer specialized templates), Web, Mobile & Form Frameworks (+ tools and templates to help you get started with each); Feature-Rich and Outstanding Mobile & Web Templates and finally, a selection of tools to help with cross browser compatibility.

We don’t presume that this is an ultimate collection, merely a selection of resources we have found to be indispensable. We are positive we have missed a few and would love to hear about the tools and resources you rely upon.

CSS Technique Download Packages & Resources

Within this category, all of the CSS resources offer multiple variations of each technique (forms, tables, rounded corners…), all within their download packages. You will often find that each variant is based on the same markup with only the CSS changing. These resources are all worth bookmarking.

Rounded Corners Techniques

As well as a detailed video tutorial, here you will also find FIVE different downloadable techniques for creating rounded corners, each having its own advantages and disadvantages.

Formy CSS Framework – Downloadable Forms

Within the Formy CSS Frameworks download package, you will find FOUR (3 horizontal variants and one vertical form example) accessible CSS form styles, which interact in the simplest and most natural way with HTML form.

Style your HTML lists with CSS

This article takes a look at styling regular lists by showing eight different ways to style your HTML lists with CSS beautifully. All of the lists are downloadable in a single package.

CSS Table Designs

A lot of time could be wasted on a single table, although it’s just a simple one. This is where this article comes in handy. It will show you TEN of the most easily implemented CSS table designs. All ten of the table styles are available as a single download.

CSS3 Tables Styles

This article will show you how to use some neat CSS3 properties to beautify your tables. All FIVE CSS3 table styles are available within the source download.

Blockquote Examples

Here you will find SIX downloadable CSS blockquote examples, varying in style from the classy to the modern and from the fun to the fancy. Great resource.

CSS-only Menus

Here is a set of CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same, with 12 different stylesheets for their appearance. You can download them all in a single package.

CSS3 Buttons

This is a collection of buttons that show what is possible using CSS3 and other advanced techniques while maintaining the simplest possible markup. All are available within the download.

Downloadable CSS Tools, Resources & Source Code

The resources within this category offer specialized templates and source code downloads that go far beyond any typical CSS resource. These downloads are fantastic for learning purposes.

CSS3 Button Generator (Source Files)

SlickMap CSS

Typographic Work Planner

CSS Elastic Calendar

Editable/Printable Invoice

Sexy Tooltips

Web, Mobile & Form Frameworks (+ Templates)

Fluid 960 Grid System Templates

Stephen Bau had been looking for a means of rapidly developing interactive prototypes for his site designs. He has built a library of commonly used HTML elements, combining these with CSS for typography and layout.
He finally created the Fluid 960 Grid System Templates (960-pixel fixed width, 12-column fluid width, and 16-column fluid width), which have been built upon the work of the 960 Grid System using effects from the Mootools JavaScript library.

Blueprint CSS Framework + Template Source

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial, you will get a look at the inner workings of Blueprint, and you’ll be able to download the demo application that uses Blueprint to get a better idea of how to work effectively and quickly with the framework.

The 1KB CSS Grid

Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System), with its main mission to be lightweight. The basic configuration is a 12-column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20-pixel gutter in between.

The Grid 960 Prototype Framework Template

This article explains the basics of Grid 960, from planning the grid for a design to actually coding the prototype. The sample design (downloadable) will exploit most capabilities of the Grid 960 giving you a firm knowledge base to work on and helping you come to grips with the 960gs.

Feature-Rich and Outstanding Mobile & Web Templates

All of these web/mobile layouts go above and beyond what most CSS templates can offer. Not all are feature-rich, but they do all offer something unique, and all have beautifully crafted markup.

Flexible, Mobile-First Layouts

Resume Template

Cross Browser Compatibility Tools

CSS3 PIE: CSS3 decorations for IE

3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7, or 8 for the more popular CSS3 rendering features: border-radius; box-shadow; border-image; multiple background images; linear-gradient as the background image.

CSS3 Please!

CSS3, Please! is a small utility that allows you to edit the document in real-time and create your own personalized cross-browser CSS3 rule.

The post 25 Essential CSS Templates, Resources and Downloads appeared first on Speckyboy Design Magazine.