Scalable CSS3 Gradient Buttons

CSS3 Buttons – a set of scalable CSS3 gradient buttons created with pure CSS , without any image or Javascript.

The buttons are scalable based on the font-size, button size and rounded corners can be adjusted by changing the font size and padding values.

The buttons can be applied to any HTML element such as div, span, input, button,  div, a, p, h2, etc. with fallback – if CSS3 is not supported, it will display a regular button just without gradient and shadow.


Pure CSS3 gradient buttons

Flexible and Modular CSS Framework – Not Just a Grid

Not Just a Grid – flexible and modular CSS framework designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

Not Just a Grid includes separate stylesheets covering multi-column layouts, typography, forms, tables and user experience enhancement.

There are individual demos to show each of the core elements: Grid, Typography, Tables, Forms, User Experience and Helpers.

Flexible and modular CSS framework

Included in download is a range of common images that are used for both visual styling and user interface enhancement.

Not just a Grid is licensed under the MIT license.

CSS3 Text to Path Generator – CSSWarp Online Tool

CSSWarponline tool that allows you to attach any text to an arbitrary bezier path or a circle and create Illustrator like “warped” text with pure CSS and HTML.

CSS3 brings new text-transform options like rotation, skew, matrix, etc. By applying the right transformations to every single letter it is possible to create the illusion of text following a path with CSS only.

With CSSWarp – text to path generator you can use google font directory and it is also possible to use your local fonts.

Blog post about CSSWarp

CSS3 text to path generator

Simple CSS3 Buttons with Icons

CSS3 Buttons – a simple CSS3 buttons framework for creating GitHub style buttons with icons.

To create a button you just have to define button class like class  .big for creating bigger buttons, class .pill to create pill-like rounded buttons, etc.

CSS3 buttons framework with icons

You can create grouped buttons that are linked together by using the .left, .middle and .right classes. Button that triggers a negative action, like deleting post, can be easily styled by using the class .negative

CSS3 Buttons framework supports a wide range of icons that can be easily added to any button by adding a span tag inside the anchor tag with the class of .icon

Online CSS3 Code Generator Tool

CSS3 Generator – is a free online tool for generating CSS3 code with detailed comments.

You can easily change common CSS3 rules like border, border-radius, box-shadow, opacity, etc. In detailed settings there are options to fine tune all the rules.

CSS3 generator comes with live preview, you instantly see the results.

online CSS3 generator tool

The Square Grid CSS Framework

The Square Grid – a simple CSS framework for designers and developers, based on 35 equal-width columns.

As other CSS frameworks, the Square Grid aims to speed up your web development process and take care of any cross-browser compatibility issues.

The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, …

Square grid CSS framework

84 Pure CSS GUI Icons

Pure CSS GUI icons – an experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML only.

The Demo Page contains a full set of user interaction and media player control icons, as well as other common icons.

Tested in: Firefox 3.5+, Chrome 5, and Opera 10.6.

84 CSS only GUI Icons

Fluid CSS/LESS Framework – Centage

Centage CSS Framework – a CSS framework based on less.js, that takes full advantage of it’s advanced features like mixins, variables and nesting.

Centage does not use pixel values, everything expands and shrinks according to browser width, remaining in visual balance, and does not add anything to your xhtml markup. It’s end result is pure, robust CSS.


Fluid CSS framework - Centage

Note: Centage! is currently in alpha release state and might have bugs. It’s not fully tested with IE, so you might encounter problems.

Flexible Grid System with Common Styles – FEM CSS Framework

FEM CSS Framework – is a 12 column grid system based on 960 Grid System with basic styles for forms, tables, menus, and the Grey Box method to background boxes easy.

All CSS modules compressed are about 10kb, and only the grid about 6.5kb. Tested in IE (6, 7, 8), Opera, Gecko (Firefox) and Webkit (Safari, Chrome) browsers.

The project is hosted at Github. Download contains the different CSS modules, examples, templates in Photoshop and Fireworks, a printer ready sketch and other resources.

CSS grid system - FEM CSS framework

CSS3 Buttons – Animated Bubble Buttons

Animated CSS3 Buttons – a useful set of CSS3 buttons with the power of CSS3 multiple backgrounds and animations. 4 color themes and 3 sizes are available.

With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.


CSS3 Buttons - Animated bubble buttons

Buttons are entirely CSS3 based. You can create your own colors and shapes by modifying the CSS file.

Note that only Mozilla and Webkit browsers support CSS gradients at the moment. The rest of the browsers will display the fallback background color.