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 project created using Sass.
Authors Alex Wolfe and Rob Levin.
Showcase Demo
View the showcase demo to see the buttons in action. The showcase provides a full list of examples along with code snippets to speed up development.
Setup & Installation
- Download the latest buttons.css
- Include buttons in your website:
<!-- Buttons core css -->
<link rel="stylesheet" href="css/buttons.css">
<!-- Only needed if you want support for dropdown menus -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
<!-- Only needed if you want font icons -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
Bower Installation
- If you're using Bower you can run
bower install Buttons
Transitioning From Buttons 1.0 to Buttons 2.0
We've made some major improvements to the Buttons library. In order to integrate buttons into your current project you'll need to make the following changes:
- Compass has been replaced with autoprefixer. Compass is not recommended but it is still supported.
- Button colors are now completely independent (ex. button-primary). We no longer have classes like
button-flat-primary
, so to achieve this you now simply addbutton-flat button-primary
- Buttons styles are now independent (ex. button-flat, button-3d, etc.). You can apply these styles and they will automatically pick up the color attached to the button (ex. button-primary button-3d).
Customize Buttons (Recommended uses Sass & Autoprefixer)
- Clone the Buttons repository.
- Make sure you have node.js installed.
- From the command line
cd
into the root for the Buttons directory. - Run
npm install
orsudo npm install
(depending on your system permissions). - On the command line run
grunt dev
; this will open a browser with Buttons. - Locate scss in the root directory.
- You can modify the _options.scss file where you can customize colors, typography, etc.
- Anytime you save your changes the Buttons showcase page will live reload with your changes!
Customize Buttons with only Sass or Compass
- Clone the Buttons repo.
- Make sure you have Sass installed.
- Run
npm install
from your terminal. - Edit the
_options.scss
with your own custom values (see example values below). - Buttons now works with or without Compass, so choose one of the following examples accordingly and run from the command line in Buttons's root directory:
For Sass run:$ sass --watch --scss scss/buttons.scss:css/buttons.css
For Compass run:$ compass watch
- The
css/buttons.css
file should now be updated.
Button Options
To edit Buttons simply change values within the _options.scss
file. After you make your edits recompile your sass file and your changes will get processed.
- $ubtn: This prefix stands for Unicorn Button and prevents namespace collisions that could occur if you import buttons as part of your Sass build process. We kindly ask you not to use the prefix $ubtn in your project in order to avoid possible name conflicts. Thanks!
- $ubtn-namespace: Desired CSS namespace for your buttons (default .button)
- $ubtn-glow-namespace: Desired CSS namespace for your glow effect (default .glow)
- $ubtn-colors: List of colors in format like
(name, background, color)
. - $ubtn-glow-color: Default glow color (#2c9adb, light blue)
- $ubtn-shapes: List of shapes in format like
(square 0px)
. You can use Sass maps if you're using 3.3. See_options.scss
for details. - $ubtn-sizes: List of sizes in format like
(jumbo 1.5)
. You can use Sass maps if you're using 3.3. See_options.scss
for details. - $ubtn-bgcolor: Default button background color (#EEE, light gray)
- $ubtn-height: Default height, also used to calculate padding on the sides (32px)
- $ubtn-font-family: Default font family
- $ubtn-font-color: Default font color (#666, gray)
- $ubtn-font-weight: Default font weight
- $ubtn-font-size: Default font size (14px). You can also specify a value of
inherit
and it will be respected.
Excluding Button Types
By default, Buttons will include all button types. You can exclude types from your compilation by simply removing the corresponding @import statement in the buttons.scss file.
//Example import statement for 3d button.
@import 'types/3d';
Remove this statement then recompile to create a build without 3d buttons.
Browser Support
Buttons works in all modern browsers (Firefox, Chrome, Safari, IE) and gracefully degrades all to Internet Explorer 8.
About Buttons
Buttons is part of the Unicorn-UI Framework. Created by Alex Wolfe @alexwolfe and Rob Levin @roblevintennis .
Does exist a list of icons ?
Hi
does exist a list for icons usage ? because it seem to be different than bootsrap ones. because i would to use ones for facebook or twitter like:
<i class="fa fa-facebook-square"></i>
thanks
Use with bootstrap
when I use it with bootstrap, and when I use
<a></a>
, the button goes ugly!Because the
<a>
in bootstrap will override the button while there's no CSS that likea.button
.extending
how can i extend from your library?
for example i want my all buttons have a style as class='button button-rounded button-flat-primary'
I could not find what to extend in my scss...
thanks
cannot override _options.scss properties without editing the file itself
Hi, I wanted to change the properties set in
_options.scss
, but as the properties are not flagged with!default
, I could not do it without editing the file itself... so I had to add the Buttons library into git and edit the file. But I would prefer to avoid this solution, in order to keep a better overview on the overrides I perform...Sass 3.3 Compatibility Issues
Hi there, just found this project and great work. Attempting to integrate it into a project I am working on.
I am running Sass 3.3.8 and getting a lot of deprecation warning when compiling.
Is this a known issue or being addressed?
Thank you
Update README.md formatted Customize Buttons List
Formatted Customize Buttons List for consistency(periods at end of items) and wording.
BEFORE: Clone the Buttons repository. Make sure you have node.js installed. From the command line cd into the root for the Buttons directory Run npm install or sudo npm install (depending on your system permissions). On the command line run grunt dev, this will open a browser with Buttons Locate scss in the root directory You can modify the _options.scss where you can customize colors, typography, and ⦠Anytime you save your changes the Buttons showcase page will live reload with your changes!
AFTER: Clone the Buttons repository. Make sure you have node.js installed. From the command line cd into the root for the Buttons directory. Run npm install or sudo npm install (depending on your system permissions). On the command line run grunt dev; this will open a browser with Buttons. Locate scss in the root directory. You can modify the _options.scss file where you can customize colors, typography, etc. Anytime you save your changes the Buttons showcase page will live reload with your changes!
Update README.md fix grammar
Fixed some run-on sentences in the major improvements section.
BEFORE: "Button colors are now complete independent (ex. button-primary) we no longer have classes like
button-flat-primary
to achieve this you now simply addbutton-flat button-primary
" AFTER: "Button colors are now complete independent (ex. button-primary). We no longer have classes likebutton-flat-primary
, so to achieve this you now simply addbutton-flat button-primary
"Menu buttons require extra click
Your implementation of the menu buttons requires an exclusive click to dismiss the menu. So if the user intended to click elsewhere, it would take 2 clicks. I noticed that the menu actually hijacks all of the web page interaction by adding an overlay on top. This doesn't help with the user experience. An easy way to test this in your demo is to click across multiple menu buttons and see how it takes 2 clicks every time you want to click the next item.
If you try the bootstrap demo below (and other frameworks, e.g. ExtJS), you'll see that you only need to click once to jump to the next menu or to click on a different component: http://getbootstrap.com/components/#btn-dropdowns
Another example is GitHub. Click "This repository" to reveal the search options, then click the search field next to it. It takes just a click to switch.
Autoprefixer: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".
I was trying to compile the sass files with gulp-autoprefixer.
However the autoprefixer shows error:
"Gradient has outdated direction syntax. New syntax is like "to left" instead of "right"."
$ubtn-use-compass is set to false
Invalid `else` statement
By looking at the code, I can say there is something going wrong here: https://github.com/alexwolfe/Buttons/blob/master/scss/_base.scss#L91.
It should be
@else
, notelse
.Shorten clearfix
Any reason you still use an old version of the micro-clearfix: https://github.com/alexwolfe/Buttons/blob/master/scss/_mixins.scss#L39-L53?
You could switch to:
Bump jquery from 2.2.4 to 3.5.0 in /showcase/js/zeroclipboard
Bumps jquery from 2.2.4 to 3.5.0.
Commits
7a0a850
3.5.08570a08
Release: Update AUTHORS.txtda3dd85
Ajax: Do not execute scripts for unsuccessful HTTP responses065143c
Ajax: Overwrite s.contentType with content-type header value, if any1a4f10d
Tests: Blacklist one focusin test in IE9e15d6b
Event: Use only one focusin/out handler per matching window & document966a709
Manipulation: Skip the select wrapper for <option> outside of IE 91d61fd9
Manipulation: Make jQuery.htmlPrefilter an identity function04bf577
Selector: Update Sizzle from 2.3.4 to 2.3.57506c9c
Build: Resolve Travis config warningsMaintainer changes
This version was pushed to npm by mgol, a new releaser for jquery since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Warning Issue with Linear Gradient
Hello, When i am running npm run dev it shows warning like this
sass/buttons/buttons.scss:1004:3: Gradient has outdated direction syntax. New syntax is like
to leftinstead of
right.
please fix itbutton link
I'm not sure why our unicorn-ui github doesn't have an issues cc / @alexwolfe .. but I'm about to fix something for Mavenlink where we need to convert anchor's without href's to buttons that "look like links" e.g. a typical grey Cancel button link thingy :) I noticed bootstrap has a btn-link and I'm going to do something like that for Mavenlink. But we probably ought to add that to this library when we can and I'm just capturing that here. See http://getbootstrap.com/css/#buttons-options