diff --git a/components/button.cjsx b/components/button.cjsx
index b6727509..31817aba 100644
--- a/components/button.cjsx
+++ b/components/button.cjsx
@@ -2,18 +2,12 @@
 @todo
 ###
 
-
-css = require "./style/button.styl"
-# -- Components
-FontIcon    = require "./font_icon"
-Ripple      = require "./ripple"
-# -- Mixins
-# StyleMixin  = require "./mixins/style"
+Style     = require './style/button'
+FontIcon  = require './font_icon'
+Ripple    = require './ripple'
 
 module.exports = React.createClass
 
-  # mixins: [StyleMixin]
-
   # -- States & Properties
   propTypes:
     type        : React.PropTypes.string
@@ -29,6 +23,10 @@ module.exports = React.createClass
   getInitialState: ->
     ripple      : undefined
 
+  # -- Lifecycle
+  componentWillReceiveProps: ->
+    @setState ripple: undefined
+
   # -- Events
   onClick: (event) ->
     event.preventDefault()
@@ -39,6 +37,7 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
+    console.log "ripple", @state.ripple
     <button data-component-button={@props.type}
             onClick={@onClick}
             className={@props.style}
diff --git a/components/form.cjsx b/components/form.cjsx
index f46f98e3..a1f3e887 100644
--- a/components/form.cjsx
+++ b/components/form.cjsx
@@ -2,18 +2,20 @@
 @todo
 ###
 
+Button    = require "./button"
 Input     = require "./input"
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    attributes        : React.PropTypes.array.required
+    attributes        : React.PropTypes.array
     storage           : React.PropTypes.bool
     # -- Events
     onSubmit          : React.PropTypes.func
     onError           : React.PropTypes.func
     onValid           : React.PropTypes.func
+    onChange          : React.PropTypes.func
 
   getDefaultProps: ->
     storage           : false
@@ -31,10 +33,16 @@ module.exports = React.createClass
     value = @getValue()
     for attr in @props.attributes when attr.required and value[attr.ref]?.trim() is ""
       is_valid = false
-      @refs[attr.ref].setError?()
+      @refs[attr.ref].setError? "Required field"
       break
-    @props[if is_valid then "onValid" else "onError"]? event, @
+
     @props.onChange? event, @
+    if is_valid
+      @refs.submit?.getDOMNode().removeAttribute "disabled"
+      @props.onValid? event, @
+    else
+      @refs.submit?.getDOMNode().setAttribute "disabled", true
+      @props.onError? event, @
 
   # -- Render
   render: ->
@@ -43,14 +51,17 @@ module.exports = React.createClass
           onChange={@onChange}>
     {
       for attribute, index in @props.attributes
-        <Input {...attribute} />
+        if attribute.type is "submit"
+          <Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
+        else
+          <Input {...attribute} />
     }
     </form>
 
   # -- Extends
   getValue: ->
     value = {}
-    value[ref] = el.getValue() for ref, el of @refs
+    value[ref] = el.getValue() for ref, el of @refs when el.getValue?
     value
 
   setValue: (data) ->
diff --git a/components/ripple.cjsx b/components/ripple.cjsx
index 13f4fa37..0c309ffa 100644
--- a/components/ripple.cjsx
+++ b/components/ripple.cjsx
@@ -2,29 +2,28 @@
 @todo
 ###
 
+require "./style/ripple"
+
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    origin      : React.PropTypes.object
-    colour      : React.PropTypes.string
+    origin    : React.PropTypes.object
 
-  getDefaultProps: ->
-    origin      : undefined
-    colour      : "#ffffff"
+  getInitialState: ->
+    className : undefined
 
   # -- Lifecycle
+  componentWillReceiveProps: (next_props) ->
+    @setState className: "active" if next_props.origin?
+
   componentDidMount: ->
     el = @getDOMNode()
     for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
-      el.addEventListener key, =>
-        el.classList.remove "active"
-      , false
-
-  componentDidUpdate: ->
-    @getDOMNode().classList.add "active"
+      el.addEventListener key, (=> @setState className: undefined), false
 
   # -- Render
   render: ->
     <div  data-component-ripple
+          className={@state.className}
           style={left: @props.origin?.left, top: @props.origin?.top} />
diff --git a/components/style/__constants.styl b/components/style/__constants.styl
new file mode 100644
index 00000000..d740c694
--- /dev/null
+++ b/components/style/__constants.styl
@@ -0,0 +1,253 @@
+@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
+
+// -- Colors
+COLOR                       = #222222
+BACKGROUND                  = #f5f5f5
+THEME                       = #cccccc
+WHITE                       = #ffffff
+PRIMARY                     = #e91e63
+SECONDARY                   = #00bcd4
+// THEME                       = #ef6c00
+CANCEL                      = red
+
+// -- Fonts
+FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
+FONT_SIZE                   = 16px
+FONT_SIZE_TINY              = 80%
+FONT_SIZE_SMALL             = 90%
+FONT_SIZE_NORMAL            = 100%
+FONT_SIZE_BIG               = 120%
+FONT_WEIGHT_THIN            = 300
+FONT_WEIGHT_NORMAL          = 400
+FONT_WEIGHT_BOLD            = 700
+
+// -- Sizes
+UNIT                        = 4rem
+SPACE                       = (UNIT * 0.29)
+OFFSET                      = (SPACE * 1.75)
+MENU_WIDTH                  = (3.85 * UNIT)
+HEADER_HEIGHT               = (1.65 * UNIT)
+BUTTON_HEIGHT               = (2.5 * SPACE)
+BUTTON_CIRCLE_HEIGHT        = (2.75 * SPACE)
+LOADING_HEIGHT              = (1.5 * UNIT)
+
+// -- Shadows
+ZDEPTH_SHADOW_1             = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
+ZDEPTH_SHADOW_2             = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_3             = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_4             = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
+ZDEPTH_SHADOW_5             = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
+
+// -- Animations
+ANIMATION_DURATION          = 450ms
+ANIMATION_EASE              = cubic-bezier(.55,0,.1,1)
+ANIMATION_DELAY             = (ANIMATION_DURATION / 5)
+
+
+// normalize v3.0.2 | MIT License | git.io/normalize
+
+html
+  font-family sans-serif
+  -ms-text-size-adjust 100%
+  -webkit-text-size-adjust 100%
+
+body
+  margin 0
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
+nav, section, summary
+  display block
+
+audio, canvas, progress, video
+  display inline-block
+  vertical-align baseline
+
+audio
+  &:not([controls])
+    display none
+    height 0
+
+[hidden], template
+  display none
+
+a
+  background-color transparent
+  &:active, &:hover
+    outline 0
+
+abbr[title]
+  border-bottom 1px dotted
+
+b, strong
+  font-weight bold
+
+dfn
+  font-style italic
+
+h1
+  font-size 2em
+  margin 0.67em 0
+
+mark
+  background #ff0
+  color #000
+
+small
+  font-size 80%
+
+sub, sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sup
+  top -0.5em
+
+sub
+  bottom -0.25em
+
+img
+  border: 0
+
+svg
+  &:not(:root)
+    overflow hidden
+
+figure
+  border: 0
+
+hr
+  -moz-box-sizing content-box
+  box-sizing content-box
+  height 0
+
+pre
+  overflow auto
+
+code, kbd, pre, samp
+  font-family monospace, monospace
+  font-size 1em
+
+button, input, optgroup, select, textarea
+  color inherit
+  font inherit
+  margin 0
+
+button
+  overflow visible
+
+button, select
+  text-transform none
+
+button, html input[type="button"], input[type="reset"], input[type="submit"]
+  -webkit-appearance button
+  cursor pointer
+
+button[disabled], html input[disabled]
+  cursor default
+
+button::-moz-focus-inner, input::-moz-focus-inner
+  border 0
+  padding 0
+
+input
+  line-height normal
+
+input[type="checkbox"], input[type="radio"]
+  box-sizing border-box
+  padding 0
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button
+  height auto
+
+input[type="search"]
+  -webkit-appearance textfield
+  -moz-box-sizing content-box
+  -webkit-box-sizing content-box
+  box-sizing content-box
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration
+  -webkit-appearance none
+
+fieldset
+  border 1px solid #c0c0c0
+  margin 0 2px
+  padding 0.35em 0.625em 0.75em
+
+legend
+  border 0
+  padding 0
+
+textarea
+  overflow auto
+
+optgroup
+  font-weight bold
+
+table
+  border-collapse collapse
+  border-spacing 0
+
+td, th
+  padding 0
+
+
+// -- App ----------------------------------------------------------------------
+a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
+  border: 0
+  margin: 0
+  outline: 0
+  padding: 0
+
+*, *:before, *:after
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+
+html
+  position: absolute
+  height: 100%
+  width: 100%
+  margin: 0
+  padding: 0
+  overflow: hidden
+
+body
+  width: 100%
+  height: 100%
+  margin: 0
+  padding: 0
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: moz-none
+  user-select: none
+  overflow: hidden
+
+  *
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+
+h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
+  -webkit-font-smoothing: RENDER = antialiased
+  font-smoothing: RENDER
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+  text-size-adjust: 100%
+
+a
+  text-decoration: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+
+::-webkit-scrollbar
+  width: 0px
+  height: 0px
+
+input:not([type="checkbox"]):not([type="radio"]), button
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  -webkit-touch-callout: none
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+  outline: none
diff --git a/components/style/button.styl b/components/style/button.styl
index 50e03c79..59e8b3d7 100644
--- a/components/style/button.styl
+++ b/components/style/button.styl
@@ -1,3 +1,64 @@
-button
-  font-size: 16px
-  font-weight: bold
+@import '__constants.styl'
+
+[data-component-button]
+  z-index                       : 1
+  display                       : inline-block
+  position                      : relative
+  overflow                      : hidden
+  font-weight                   : normal
+  text-align                    : center
+  text-decoration               : none
+  white-space                   : nowrap
+  border                        : none
+  transition-property             background-color, box-shadow
+  transition-duration             ANIMATION_DURATION
+  transition-timing-function      ANIMATION_EASE
+
+  // -- Style
+  &:not([disabled])
+    cursor                      : pointer
+    box-shadow                    ZDEPTH_SHADOW_1
+    &:hover /*, &:active, &:focus */
+      outline                   : 0
+      box-shadow                  ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
+    &:not(.primary):not(.secondary)
+      color                     : COLOR
+      background-color          : WHITE
+    &.primary, &.secondary
+      color                     : WHITE
+    &.primary
+      background-color          : PRIMARY
+    &.secondary
+      background-color          : SECONDARY
+
+  &[disabled]
+    background-color            : darken(BACKGROUND, 7.5%)
+    color                       : darken(BACKGROUND, 35%)
+
+  // -- Layout
+  & ~ &:not(:last-child)
+    margin-left                 : SPACE
+  > *
+    pointer-events                  : none
+
+[data-component-button="square"]
+  margin-bottom                 : SPACE
+  padding                       : (SPACE / 2) (SPACE / 1.25)
+  font-size                     : FONT_SIZE_SMALL
+  text-transform                : uppercase
+  border-radius                 : (SPACE / 8)
+  > *
+    vertical-align              : bottom
+  > .icon
+    font-size                   : FONT_SIZE_BIG
+    margin-right                : (SPACE / 2)
+  &.anchor
+    width                       : 100%
+
+[data-component-button="circle"]
+  width                         : BUTTON_CIRCLE_HEIGHT
+  height                        : BUTTON_CIRCLE_HEIGHT
+  font-size                     : (BUTTON_CIRCLE_HEIGHT / 2.25)
+  border-radius                 : 50%
+  > .icon
+    line-height                 : BUTTON_CIRCLE_HEIGHT
diff --git a/components/style/ripple.styl b/components/style/ripple.styl
new file mode 100644
index 00000000..4634b4be
--- /dev/null
+++ b/components/style/ripple.styl
@@ -0,0 +1,24 @@
+@import '__constants.styl'
+
+[data-component-ripple]
+  position                    : absolute
+  background-color            : alpha(WHITE, 0.65)
+  transform                     translateX(-50%) translateY(-50%)
+  border-radius               : 50%
+  // -- Classes
+  &.active, &:hover
+    animation-name              ripple
+    animation-iteration-count   1
+    animation-timing-function   ANIMATION_EASE
+    animation-duration          (2 * ANIMATION_DURATION)
+    opacity : 0.1
+
+@keyframes ripple
+  0%
+    width                     : 0
+    height                    : 0
+    opacity                   : 1
+  100%
+    width                     : SIZE = (4 * UNIT)
+    height                    : SIZE
+    opacity                   : 0
diff --git a/spec/test.cjsx b/spec/index.cjsx
similarity index 50%
rename from spec/test.cjsx
rename to spec/index.cjsx
index aedeabc4..68f82db1 100644
--- a/spec/test.cjsx
+++ b/spec/index.cjsx
@@ -1,10 +1,7 @@
 "use strict"
 
 # -- Components
-Input     = require "../components/input"
-Form      = require "../components/form"
 Button    = require "../components/button"
-FontIcon  = require "../components/font_icon"
 
 Test = React.createClass
   getInitialState: ->
@@ -38,21 +35,19 @@ Test = React.createClass
     ]
 
     <app>
-      <h1>Hello World !</h1>
-      <Form attributes={attributes}
-            onError={@onFormError}
-            onValid={@onFormValid}/>
-      # <Button caption="Login" disabled={not @state.submitable} />
-      # <Button caption="Primary" style="primary" icon="access_alarm" />
-      # <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
-      # <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
-      #
-      # <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
-      # <Button type="circle" icon="explore" style="primary" />
-      # <Button type="circle" icon="zoom_in" style="secondary" />
-      # <Button type="circle" icon="input" disabled={true} />
-      #
-      <FontIcon value="access_alarm" />
+      <h1>React-Kit</h1>
+      <h2>New way for create</h2>
+
+      <h3>Buttons</h3>
+      <Button caption="Login" disabled={not @state.submitable} />
+      <Button caption="Primary" style="primary" icon="access_alarm" />
+      <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
+      <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
+
+      <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
+      <Button type="circle" icon="explore" style="primary" />
+      <Button type="circle" icon="zoom_in" style="secondary" />
+      <Button type="circle" icon="input" disabled={true} />
     </app>
 
 React.render <Test/>, document.body
diff --git a/webpack.config.coffee b/webpack.config.coffee
index 31ae6982..6390a8b0 100644
--- a/webpack.config.coffee
+++ b/webpack.config.coffee
@@ -6,11 +6,11 @@ node_modules  = __dirname + '/node_modules'
 module.exports =
   cache       : true
 
-  resolve     : extensions: ['', '.cjsx', '.coffee', '.js', '.json', 'styl']
+  resolve     : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl']
 
   context     : __dirname + '/spec'
 
-  entry       : ['./test.cjsx']
+  entry       : ['./index.cjsx']
 
   output :
     path      : if process.env.NODE_ENV is 'production' then './dist' else './build'
@@ -28,12 +28,12 @@ module.exports =
     inline      : true
 
   module :
-    noParse: [node_modules + '/react/dist/*.js']
+    noParse : [node_modules + '/react/dist/*.js']
 
     loaders : [
       test    : /\.cjsx$/,    loader: 'coffee-jsx-loader'
     ,
       test    : /\.coffee$/,  loader: 'coffee-jsx-loader'
     ,
-      test    : /\.styl$/,    loader: 'style-loader!css-loader!stylus-loader'
+      test    : /\.styl$/,    loader: 'style-loader!css-loader!stylus-loader?importLoaders=1&minimize!'
     ]