A collection of CSS3 buttons implemented in Sass.

Related tags

CSS css3-buttons
Overview

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. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button.

These buttons are now implemented using Sass, with help from Bourbon. The generated CSS for all the buttons is also available.

If you'd like to modify the repo locally, you can start the Jekyll server and watch the Sass files with:

rake server

View the buttons here: http://ubuwaits.github.io/css3-buttons/

You might also like...

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web 🎉 🎉 🎉 Version 8 of @fluentui/react is now available on npm! 🎉 🎉 🎉 See the release notes for more info, and please file an issue if

Jan 4, 2023

CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

Dec 8, 2022

CSSHell - Collection of common CSS mistakes, and how to fix them

CSS Hell - To Hell with bad CSS! Collection of common CSS mistakes, and how to f

Nov 4, 2022

Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy A Collection of some of the best jokes. This is a Web Application with some jokes related to coding & Dark Humor. Created with data from the Jok

Jul 28, 2022

OrganiCSS is a collection of mixins for writing logical CSS in different pre-processors and libraries.

OrganiCSS is a collection of mixins for writing logical CSS in different pre-processors and libraries.

OrganiCSS is a collection of mixins and functions to support writing progressively-enhanced logical CSS in many different flavors. Getting Started To

Jul 20, 2022

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Jan 4, 2023

Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.

React Native UI Buttons ✨ Installation If you want to use icons make sure you have react-native-vector-icons installed in your project. npm install --

Dec 5, 2022

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

Intro iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass. Demo: https://gudh.github.io/ihover/d

Jan 4, 2023

A collection of all the data structures implemented in javascript code

Data structures A collection of all the data structures implemented in javascript code, interview questions & problems ( with solutions ) Contributors

May 1, 2022

Obsidian-Snippet-collection - A collection of snippet to customize obsidian

Obsidian-Snippet-collection - A collection of snippet to customize obsidian

This repo is a collection of CSS snippets for Obsidian.md. To install them on PC

Dec 22, 2022

jQuery plugin for styling checkboxes and radio-buttons

jQuery plugin for styling checkboxes and radio-buttons

English description | Описание на русском jQuery-plugin for styling checkboxes and radio-buttons. With skin support. Version: 2.0.0 Project page and d

Sep 24, 2022

Buttons with built-in loading indicators.

Ladda Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Check out the demo page. Installation npm in

Jan 3, 2023

A set of buttons with a magnetic interaction and a hover effect.

A set of buttons with a magnetic interaction and a hover effect.

Magnetic Buttons A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto. Article on Codrops

Dec 24, 2022

A bursting particles effects buttons component ✨💥❄️🌋

A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Nov 11, 2022

A little library that can be used for bursting particles effects on buttons and other elements

A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Jan 1, 2023

Easiest medium to use buttons with any discord API wrapper

Easiest medium to use buttons with any discord API wrapper

Discord Buttons Plugin Easiest medium to use buttons with any discord API wrapper /* Generate 1st Button with "Yes" lable on it */ const button1

May 14, 2022

Discord.js Music Bot with buttons and slash support!

Music Bot Vote for us! (Please) How to use? Download the repo, create a .env file, and add your token into it. You need to change guildOnly to your gu

Nov 24, 2022

Discord.js ticket bot with buttons and without DB!

Ticket Bot Star (Please) How to use? Download the repo, create a .env file, and add your token into it. You need to change guildOnly to your guild id

Nov 17, 2022

An easy bot to create discord buttons easily.

Discord Buttons An easy bot to create discord buttons easily. Note: Node.js 16.6.0 or newer is required. Installation npm install You need to rename e

Aug 19, 2022
Comments
  • Little bit optimized css

    Little bit optimized css

    Hi, Chad. I optimized the css a little bit. Cut some of the rules in the condensed presentation. All of this has reduced the file size of approximately 1,3 kb. And I also think that the global reset must be located in front of the other css rules. So, I allowed myself to move it to the beginning.

    opened by Mihkach 1
  • Links as Buttons

    Links as Buttons

    Just wanted to let you know I forked - or branched, or possibly both, not entirely sure - this project. I found it to be a good collection of css styles for buttons, but as a rails developer sometimes I need to style links as buttons. I thought I would take the hour to update your css to provide that functionality.

    "Updated to style links as buttons. Created a default base button style, 'a.button, button' and removed redundant css. Pulled non-button css out of button.css and placed that in stylesheet.css. Updated index.html to demonstrate links as buttons and added stylesheet.css to index.html's head."

    If I missed something, let me know. Thanks for putting this out there. I will be sure to use it in future projects.

    opened by tyrauber 1
  • Added script for displaying button CSS

    Added script for displaying button CSS

    Hi Chad, I took the liberty to add a little JavaScript to your buttons so when you click them it pops up the button CSS. If you want to see the script working, you can check it here: http://inkel.github.com/css3-buttons/

    Sadly this script only works on Firefox at the moment, I need to investigate a bit further.

    Also I couldn't find a way to ignore the last commit, you're more than free to ignore that commit and I please accept my apologizes if I offended you for taking the liberty of adding myself in the credits.

    opened by inkel 1
  • Added script for displaying button CSS

    Added script for displaying button CSS

    Hi Chad, I took the liberty to add a little JavaScript to your buttons so when you click them it pops up the button CSS. If you want to see the script working, you can check it here: http://inkel.github.com/css3-buttons/

    Also I couldn't find a way to ignore commit 63050767, you're more than free to ignore that commit and I please accept my apologizes if I offended you for taking the liberty of adding myself in the credits.

    opened by inkel 4
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
A Lightweight Sass Tool Set

A Lightweight Sass Tool Set Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author. It is

thoughtbot, inc. 9.1k Dec 30, 2022
Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp

Quick start dự án Pug, Sass, Gulp Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp #️⃣ Setup Cài đặt Node js Tới thư mục project cài template và các mo

Nguyễn Quang Sang 3 Oct 7, 2022
A CSS button library built using Sass and Compass

Buttons 2.0 Buttons 2.0 Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is a free open source pro

Alex Wolfe 5.1k Jan 4, 2023
⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

Alaska Labs 8 Sep 10, 2022
Convert css (scss/sass) to vanilla-extract.

CSS-to-vanilla-extract ⚡ Welcome ?? Convert CSS (SCSS/SASS) to vanilla-extract. playground Install npm i -D c2ve Usage Once installed, you can run it

j1ngzoue 31 Jan 4, 2023
An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Kelechi Okoronkwo 7 Sep 22, 2022
Grid based on CSS3 flexbox

Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS <

kj 9.3k Jan 2, 2023
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

Selectivizr CSS3 selectors for IE 6-8 selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explor

Keith Clark 1.7k Dec 18, 2022
Jason Johnston 2.8k Dec 26, 2022