Initial commit bttn.css - Jelly Bttn

README.md

@@ -1,2 +1,19 @@
 # bttn.css
-Awesome buttons for your next web project.
+Awesome CSS buttons for your next web project
+
+### Environment Setup
+**Install stylus and autoprefixer-stylus**
+`npm install -g stylus`
+`npm install -g autoprefixer-stylus`
+`npm install -g clean-css`
+
+**Compile stylus to css**
+`stylus -w bttn.styl -o bttn.css`
+
+**Autoprefix & Minify css for production**
+`stylus -u autoprefixer-stylus -c bttn.styl -o bttn.css`
+`cleancss -o bttn.min.css bttn.css`
+
+**View bttn.css demo in browser**
+`stylus -u autoprefixer-stylus -c demo/demo.styl -o demo/demo.css`
+`open demo/index.html in browser`

browserslist

@@ -0,0 +1,6 @@
+# Browsers that bttn.css supports
+
+> 1%
+Last 2 versions
+Firefox ESR
+IE 8 # sorry

bttn.css

@@ -0,0 +1,141 @@
+.bttn-default {
+  color: #fff;
+}
+.bttn-primary,
+.bttn,
+.bttn-lg,
+.bttn-md,
+.bttn-sm,
+.bttn-xs {
+  color: #1d89ff;
+}
+.bttn-warning {
+  color: #ffb85f;
+}
+.bttn-danger {
+  color: #ff5964;
+}
+.bttn-success {
+  color: #28b78d;
+}
+.bttn-royal {
+  color: #bd2df5;
+}
+.bttn,
+.bttn-lg,
+.bttn-md,
+.bttn-sm,
+.bttn-xs {
+  margin: 0;
+  padding: 0;
+  outline: hidden;
+  border-width: 0;
+  border-color: transparent;
+  background: transparent;
+  font-weight: 400;
+  cursor: pointer;
+  position: relative;
+}
+.bttn-lg {
+  padding: 8px 15px;
+  font-size: 24px;
+  font-family: inherit;
+}
+.bttn-md {
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+}
+.bttn-sm {
+  padding: 4px 10px;
+  font-size: 16px;
+  font-family: inherit;
+}
+.bttn-xs {
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+}
+.bttn-jelly {
+  margin: 0;
+  padding: 0;
+  outline: hidden;
+  border-width: 0;
+  border-color: transparent;
+  background: transparent;
+  font-weight: 400;
+  cursor: pointer;
+  position: relative;
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+  border: 1px solid currentColor;
+  border-radius: 50px;
+  color: currentColor;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.bttn-jelly:before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  background: currentColor;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  z-index: -1;
+  border-radius: 50px;
+  transform: scale(0.8);
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.bttn-jelly:hover,
+.bttn-jelly:focus {
+  outline: none;
+  border-color: currentColor;
+  box-shadow: 0 1px 8px rgba(58,51,53,0.6);
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: scale(1.1);
+}
+.bttn-jelly:hover:before,
+.bttn-jelly:focus:before {
+  transform: scale(1);
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  opacity: 0.2;
+}
+.bttn-jelly.bttn-xs {
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+}
+.bttn-jelly.bttn-xs:hover,
+.bttn-jelly.bttn-xs:focus {
+  box-shadow: 0 1px 4px rgba(58,51,53,0.6);
+}
+.bttn-jelly.bttn-sm {
+  padding: 4px 10px;
+  font-size: 16px;
+  font-family: inherit;
+}
+.bttn-jelly.bttn-sm:hover,
+.bttn-jelly.bttn-sm:focus {
+  box-shadow: 0 1px 6px rgba(58,51,53,0.6);
+}
+.bttn-jelly.bttn-md {
+  font-size: 20px;
+  font-family: inherit;
+  padding: 5px 12px;
+}
+.bttn-jelly.bttn-md:hover,
+.bttn-jelly.bttn-md:focus {
+  box-shadow: 0 1px 8px rgba(58,51,53,0.6);
+}
+.bttn-jelly.bttn-lg {
+  padding: 8px 15px;
+  font-size: 24px;
+  font-family: inherit;
+}
+.bttn-jelly.bttn-lg:hover,
+.bttn-jelly.bttn-lg:focus {
+  box-shadow: 0 1px 10px rgba(58,51,53,0.6);
+}

bttn.styl

@@ -0,0 +1,50 @@
+@import "./config/config.styl"
+@import "./config/bttn-base.styl"
+
+.bttn-jelly
+  {bttnBaseStyle}
+  {bttnMdSize}
+  border: 1px solid currentColor
+  border-radius 50px;
+  color: currentColor;
+  overflow hidden
+  transition all 0.3s anim_func
+  &:before
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background: currentColor;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    z-index -1
+    border-radius 50px;
+    transform scale(0.8)
+    transition all 0.3s anim_func
+  &:hover, &:focus
+    outline none
+    border-color currentColor
+    box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .4)
+    transition all 0.5s anim_func
+    transform scale(1.1)
+    &:before
+      transform scale(1)
+      transition all 0.5s anim_func
+      opacity: 0.2
+  &.bttn-xs
+    {bttnXsSize}
+    &:hover, &:focus
+      box-shadow 0 1px 4px cBlack - rgba(0, 0, 0, .4)
+  &.bttn-sm
+    {bttnSmSize}
+    &:hover, &:focus
+      box-shadow 0 1px 6px cBlack - rgba(0, 0, 0, .4)
+  &.bttn-md
+    {bttnMdSize}
+    &:hover, &:focus
+      box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .4)
+  &.bttn-lg
+    {bttnLgSize}
+    &:hover, &:focus
+      box-shadow 0 1px 10px cBlack - rgba(0, 0, 0, .4)

config/bttn-base.styl

@@ -0,0 +1,59 @@
+/* Base button config */
+bttnXsSize =
+  padding 3px 8px
+  font-size 12px;
+  font-family: inherit
+
+bttnSmSize =
+  padding 4px 10px
+  font-size 16px;
+  font-family: inherit
+
+bttnMdSize =
+  font-size 20px
+  font-family: inherit;
+  padding 5px 12px
+
+bttnLgSize =
+  padding 8px 15px
+  font-size 24px;
+  font-family: inherit
+
+bttnBaseStyle =
+  margin 0
+  padding 0
+  outline hidden
+  border-width 0
+  border-color transparent
+  background transparent
+  font-weight fontNormal
+  cursor pointer
+  position relative
+
+.bttn-default
+  color cWhite
+.bttn-primary
+  color cBlue
+.bttn-warning
+  color cYellow
+.bttn-danger
+  color cRedLight
+.bttn-success
+  color cGreen
+.bttn-royal
+  color cPurple
+.bttn
+  @extend .bttn-primary
+  {bttnBaseStyle}
+.bttn-lg
+  @extend .bttn
+  {bttnLgSize}
+.bttn-md
+  @extend .bttn
+  {bttnMdSize}
+.bttn-sm
+  @extend .bttn
+  {bttnSmSize}
+.bttn-xs
+  @extend .bttn
+  {bttnXsSize}

config/config.styl

@@ -0,0 +1,21 @@
+/* Colors palette */
+cWhite = #ffffff
+cBlue = #1d89ff
+cYellow = #FFB85F
+cRed = #E62739
+cRedLight = #FF5964
+cOrange = #FF7A5A
+cGreen = #28B78D
+cBlack = #3A3335
+cGrey = #3f4c6b
+cDarkGrey = #283450
+cBlackLight = #403E44
+cPurple = #bd2df5
+
+/* Default animation function */
+anim_func=cubic-bezier(0.68, -0.55, 0.265, 1.55)
+
+/* Font size */
+fontLight = 300
+fontNormal = 400
+fontBold = 700

demo/demo.js

@@ -0,0 +1,19 @@
+/**
+ * Created by Ganapati(@ganapativs) on 9/27/16.
+ */
+
+;(function() {
+    // Color change for button block
+    $(document).on('click', '.fancy-box .colors .color', function() {
+        var element = $(this).closest('.fancy-box');
+        var className = $(this).attr('data-class');
+
+        $(element).find('.color').removeClass('active');
+        $(this).addClass('active');
+
+        if(element.attr('data-activeclass'))
+            element.removeClass(element.attr('data-activeclass'));
+        element.addClass(className);
+        element.attr('data-activeclass', className);
+    });
+})();