Change text on buttons not only press me

When clicking the buttons within Firefox it shows a dotted outline. This outline can be removed from anchor tags with this:

a:focus { 
    outline: none; 
}

If you are working with button tags, which I don't think you are, you can use this:

button::-moz-focus-inner {
    border: 0;
}

reference

Button square (and possibly other shapes) have a hard coded width so they don't grow to text content.

Showcase demo provided in documentation is currently not working, seems like some sort of hosting problem - see http://unicorn-ui.com/buttons/
Redirects to generic Account Suspended page

This Account has been suspended.
Contact your hosting provider for more information.

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

The correct command to install your library is bower install Buttons (capital B)

Add :focus styles to help keyboard users indicate when a button is in focus, remove outline:none

Drop down menu not working when clicking exactly over the icon "fa fa-caret-down"

<div class="button-group">
    <button type="button" class="button button-primary button-small"><i class="fa fa-edit"></i></button>

    <span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
      <a href="#" class="button button-primary button-small"><i class="fa fa-caret-down"></i></a>

      <ul class="button-dropdown-list is-below">
          <li class="button-dropdown-divider"><a href="#">Duplicate</a></li>
          <li class="button-dropdown-divider"><a href="#">Delete</a></li>
      </ul>
    </span>
</div>

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

I need buttons that have boolean state (on|off). After doing research the :active state is unsuitable for this http://stackoverflow.com/questions/12960068/keep-css-active-state-after-click-with-jquery more preferable is to add an .active class. Then in jquery you can do $('button').toggleClass('active') upon click. I just tried this out on my local build, all I had to do in the css is to replace every instance of :active to .active. I propose this library drop support for :active and switch over to using a class.

@alexwolfe Trever showed me a that currentColor is a bonafide CSS value that will keep these in sync. It's not a big deal but a nicety that if you change one color the other just automatically changes. I think Trever's gonna take this one.

HI guys,

love your buttons. I just wanted to use a few in existing project, so maybe i forgot to copy from your files. but getting this Undefined mixin 'box-shadow'. I can not see where in your files you define it. thanks

hello!
Great work you are sharing here. Thank you!

Is there somewhere a list of supported browsers?

Hi Alex,

thanks a lot for awesome buttons, I appreciate your work.

Rafał

Great project - thanks!!

Just testing in IE8 (Win 7) and the icons don't behave until you have hovered over them.

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.

Any reason you don't use Sass maps here: https://github.com/alexwolfe/Buttons/blob/master/scss/_options.scss#L46?

Hi there,

A simple question,how can I go to the link when I remplace the ?

When I click on buttons I cannot go to the link that I use.

Thanks
any where good job for this design buttons

Is there anyone who knows how to implement this library with Laravel 5.1?

I find it difficult to integrate using elixir.

thanks.

I see at the very bottom of http://alexwolfe.github.io/Buttons/ it is Apache 2 license. Consider adding a LICENSE file to master branch. Nice work!

I want to convert to rails-assets so I can use it in my rails app, but it is missing versions.

Thanks.

https://rails-assets.org

When the text is too large to fit into the button, it's hidden like so (full text is "start free crash course"):

except when the button is pressed:

Setting overflow: hidden on the element prevents the button text from leaking outside.

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

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:

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

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

In the homepage http://unicorn-ui.com/buttons/ displayed by IE11, in the third button group (Royal / Raised), an aliasing effect affect the 1st- and 3rd-button borders, varying at window resize.

Therefore the buttons seem to be in different states.

I couldn't reproduce this issue with Firefox or Chrome so maybe it's an IE bug.

Feel free to confirm here.

You can also check on the Google Chrome audits, under accessibility.

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 ofright.
please fix it

If you go to the Button Sizes section of the builder page, and increase the "normal" sized button by 2px (up to 16px) the button looked correct in relation to the small and large buttons.

Are you guys going to add more flat button designs?

Just like the title says

Take a look at this attachment:

Notice that the 3rd button from the left is smaller overall, but larger text than the 'standard' size button, the one immediately to the left.

I see this in latest builds of FF and Chrome on OSX 10.9.

Hi

does exist a way to change the button color ? if not, can it be possible to override the gradient via the provided class .button ?

thanks

With Sass 3.3.4 (Maptastic Maple)

Am getting a lot of noisy warnings along the lines of

DEPRECATION WARNING on line 17 of sass/base/buttons/_buttons.scss:
Assigning to global variable "$unicorn-btn-tinyfs" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unicorn-btn-tinyfs: $unicorn-btn-font-size - 2 !global" instead.
Note that this will be incompatible with Sass 3.2.

the buttons library also seems to add a lot to compile time
is that normal?
Upshot being I'm thinking there is more to this than noise - ie just adding :quiet isn't going to resolve that.

How would you feel about updating to the new global variable approach?

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 like a.button.

[21:33:42] gulp-notify: [Error running Gulp] styles failed, check the logs..
[21:33:42] styles error: Error in plugin 'gulp-sass'
Message:
    bower_components/Buttons/scss/types/_longshadow.scss
  21:16  error parsing interpolated value
Details:
    column: 16
    line: 21
    file: /Users/rolle/Projects/dudetest/bower_components/Buttons/scss/types/_longshadow.scss
    status: 1
    messageFormatted: bower_components/Buttons/scss/types/_longshadow.scss
  21:16  error parsing interpolated value

What I'm using:

"bower": "^1.4.1",
"browser-sync": "~2.7.12",
"gulp": "^3.9.0",
"gulp-autoprefixer": "2.3.1",
"gulp-cache": "0.2.10",
"gulp-changed": "^1.2.1",
"gulp-concat": "2.5.2",
"gulp-css-globbing": "^0.1.8",
"gulp-header": "1.2.2",
"gulp-imagemin": "^2.2.1",
"gulp-minify-css": "1.1.6",
"gulp-notify": "^2.2.0",
"gulp-pixrem": "^0.2.3",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "1.2.0",
"gulp-util": "^3.0.5",

It works when if I disable Long Shadow Function all together.

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.

DEPRECATION WARNING on line 18 of /....../_buttons.scss:
Assigning to global variable "$unicorn-btn-smallfs" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unicorn-btn-smallfs: $unicorn-btn-font-size + 1 !global" instead.
Note that this will be incompatible with Sass 3.2.

Is this a known issue or being addressed?

Thank you

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, not else.

weird

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