diff --git a/examples/form.json b/examples/form.json
index d072bb5..089a6ea 100755
--- a/examples/form.json
+++ b/examples/form.json
@@ -26,7 +26,7 @@
     {
       "id":"panel",
       "type":"haxework.gui.HGroupView",
-      "layoutHAlign":"~haxework.gui.core.HAlign:LEFT",
+      "layoutHAlign":"~haxework.gui.core.HAlign:RIGHT",
       "layoutVAlign":"~haxework.gui.core.VAlign:MIDDLE",
       "pWidth":100,
       "height":30,
@@ -39,7 +39,7 @@
           "type":"haxework.gui.ButtonView",
           "width":100,
           "pHeight":100,
-          "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
+          "skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0xcc0000"},
           "text":"Text1",
           "onPress":"#listener"
         },
@@ -47,7 +47,7 @@
           "id":"button2",
           "type":"haxework.gui.ButtonView",
           "contentSize":true,
-          "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
+          "skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cc00"},
           "text":"Text2",
           "fontFamily":"Georgia",
           "fontColor":"0xffffff",
@@ -57,7 +57,7 @@
           "id":"button3",
           "type":"haxework.gui.ButtonView",
           "contentSize":true,
-          "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ffff"},
+          "skin":{"type":"haxework.gui.skin.ButtonColorSkin", "color":"0x00cccc"},
           "text":"Text 3333333333 ddd",
           "fontFamily":"Tahoma",
           "fontColor":"0xff0000",
diff --git a/haxework/gui/ButtonView.hx b/haxework/gui/ButtonView.hx
index f2ba579..83e2226 100755
--- a/haxework/gui/ButtonView.hx
+++ b/haxework/gui/ButtonView.hx
@@ -12,29 +12,74 @@ enum ButtonState {
 
 class ButtonView extends LabelView {
 
-  public var state(default, null):ButtonState;
+  public var state(get, null):ButtonState;
   public var dispatcher(default, null):IDispatcher<ButtonViewListener>;
   public var onPress(null, set):ButtonViewListener;
 
+  private var overed:Bool;
+  private var downed:Bool;
+
   public function new() {
     super();
+    overed = false;
+    downed = false;
     state = ButtonState.UP;
     dispatcher = new Dispatcher<ButtonViewListener>();
+    content.buttonMode = true;
+    content.mouseChildren = false;
     content.addEventListener(MouseEvent.CLICK, onMouseClick);
+    content.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
+    content.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
+    content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
+    //content.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
   }
 
   private function onMouseClick(event:MouseEvent):Void {
     dispatcher.dispatch(pressCaller);
   }
 
+  private function onMouseOver(event:MouseEvent):Void {
+    overed = true;
+    invalidate();
+  }
+
+  private function onMouseOut(event:MouseEvent):Void {
+    overed = false;
+    invalidate();
+  }
+
+  private function onMouseDown(event:MouseEvent):Void {
+    downed = true;
+    content.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+    invalidate();
+  }
+
+  private function onMouseUp(event:MouseEvent):Void {
+    downed = false;
+    content.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+    invalidate();
+  }
+
   private function pressCaller(listener:ButtonViewListener):Void {
     listener.onPress(this);
   }
 
+  private function get_state():ButtonState {
+    return (downed && overed) ? ButtonState.DOWN : overed ? ButtonState.OVER : ButtonState.UP;
+  }
+
   private function set_onPress(value:ButtonViewListener):ButtonViewListener {
     dispatcher.addListener(value);
     return value;
   }
+
+  public function dispose():Void {
+    content.removeEventListener(MouseEvent.CLICK, onMouseClick);
+    content.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
+    content.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
+    content.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
+    content.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+  }
 }
 
 interface ButtonViewListener {
diff --git a/haxework/gui/GuiBuilder.hx b/haxework/gui/GuiBuilder.hx
index cf01075..42cc3a8 100755
--- a/haxework/gui/GuiBuilder.hx
+++ b/haxework/gui/GuiBuilder.hx
@@ -10,6 +10,7 @@ import haxework.gui.TextView;
 import haxework.gui.LabelView;
 import haxework.gui.ButtonView;
 import haxework.gui.skin.ColorSkin;
+import haxework.gui.skin.ButtonColorSkin;
 
 class GuiBuilder {
 
diff --git a/haxework/gui/layout/HorizontalLayout.hx b/haxework/gui/layout/HorizontalLayout.hx
index d5b15b4..e812d0e 100755
--- a/haxework/gui/layout/HorizontalLayout.hx
+++ b/haxework/gui/layout/HorizontalLayout.hx
@@ -1,5 +1,6 @@
 package haxework.gui.layout;
 
+import haxework.gui.core.HAlign;
 import haxework.gui.core.SizeType;
 
 class HorizontalLayout extends DefaultLayout {
@@ -21,10 +22,23 @@ class HorizontalLayout extends DefaultLayout {
       placeViewVertical(group, view);
     }
 
-    var x:Float = group.leftPadding;
     leftSize -= fixedSize;
     for (view in views) {
-      if (view.widthType == SizeType.PERCENT) view.w = view.pWidth / 100 * leftSize;
+      if (view.widthType == SizeType.PERCENT) {
+        view.w = view.pWidth / 100 * leftSize;
+        fixedSize += view.width + view.leftMargin + view.rightMargin;
+      }
+    }
+
+    var x:Float;
+    switch (group.layoutHAlign) {
+      case HAlign.LEFT: x = group.leftPadding;
+      case HAlign.CENTER: x = (group.width - fixedSize) / 2 + group.leftPadding - group.rightPadding;
+      case HAlign.RIGHT: x = group.width - fixedSize - group.rightPadding;
+      case HAlign.NONE: x = 0;
+    }
+
+    for (view in views) {
       view.x = x + view.leftMargin;
       x += (view.width + view.leftMargin + view.rightMargin + group.layoutMargin);
     }
diff --git a/haxework/gui/layout/VerticalLayout.hx b/haxework/gui/layout/VerticalLayout.hx
index 3bcea1e..5cccee4 100755
--- a/haxework/gui/layout/VerticalLayout.hx
+++ b/haxework/gui/layout/VerticalLayout.hx
@@ -1,5 +1,6 @@
 package haxework.gui.layout;
 
+import haxework.gui.core.VAlign;
 import haxework.gui.core.SizeType;
 
 class VerticalLayout extends DefaultLayout {
@@ -21,10 +22,23 @@ class VerticalLayout extends DefaultLayout {
       placeViewHorizontal(group, view);
     }
 
-    var y:Float = group.topPadding;
     leftSize -= fixedSize;
     for (view in views) {
-      if (view.heightType == SizeType.PERCENT) view.h = view.pHeight / 100 * leftSize;
+      if (view.heightType == SizeType.PERCENT) {
+        view.h = view.pHeight / 100 * leftSize;
+        fixedSize += view.height + view.topMargin + view.bottomMargin;
+      }
+    }
+
+    var y:Float;
+    switch (group.layoutVAlign) {
+      case VAlign.TOP: y = group.topPadding;
+      case VAlign.MIDDLE: y = (group.height - fixedSize) / 2 + group.topPadding - group.bottomPadding;
+      case VAlign.BOTTOM: y = group.height - fixedSize - group.bottomPadding;
+      case VAlign.NONE: y = 0;
+    }
+
+    for (view in views) {
       view.y = y + view.topMargin;
       y += (view.height + view.topMargin + view.bottomMargin + group.layoutMargin);
     }
diff --git a/haxework/gui/skin/ButtonColorSkin.hx b/haxework/gui/skin/ButtonColorSkin.hx
new file mode 100755
index 0000000..9b3f9ed
--- /dev/null
+++ b/haxework/gui/skin/ButtonColorSkin.hx
@@ -0,0 +1,35 @@
+package haxework.gui.skin;
+
+import haxework.gui.utils.ColorUtils;
+import haxework.gui.ButtonView.ButtonState;
+import flash.display.Graphics;
+import flash.display.Sprite;
+
+class ButtonColorSkin implements ISkin<Sprite, ButtonView> {
+
+  public var color(default, set_color):Int;
+  private var colors:Map<ButtonState, Int>;
+
+  public function new(?color:Int = 0xffffff) {
+    this.color = color;
+  }
+
+  private function set_color(value:Int):Int {
+    colors = new Map<ButtonState, Int>();
+    colors.set(ButtonState.UP, value);
+    colors.set(ButtonState.DOWN, ColorUtils.diff(value, -64));
+    colors.set(ButtonState.OVER, ColorUtils.diff(value, 64));
+    //colors.set(ButtonState.DISABLE, ColorUtils.multiply(value, 0.6));
+    return value;
+  }
+
+  public function draw(view:ButtonView):Void {
+    var color:Int = colors.get(view.state);
+    var graphics:Graphics = view.content.graphics;
+    graphics.clear();
+    graphics.beginFill(color);
+    graphics.drawRect(0, 0, view.width, view.height);
+    graphics.endFill();
+  }
+
+}
\ No newline at end of file
diff --git a/haxework/gui/utils/ColorUtils.hx b/haxework/gui/utils/ColorUtils.hx
new file mode 100755
index 0000000..fd7044e
--- /dev/null
+++ b/haxework/gui/utils/ColorUtils.hx
@@ -0,0 +1,31 @@
+package haxework.gui.utils;
+
+class ColorUtils {
+
+  public static function multiply(color:Int, m:Float):Int {
+    var rgb:Array<Int> = color2rgb(color);
+    var red:Int = cast Math.min(255, Math.round(rgb[0] * m));
+    var green:Int = cast Math.min(255, Math.round(rgb[1] * m));
+    var blue:Int = cast Math.min(255, Math.round(rgb[2] * m));
+    return rgb2color(red, green, blue);
+  }
+
+  public static function diff(color:Int, d:Int):Int {
+    var rgb:Array<Int> = color2rgb(color);
+    var red:Int = cast Math.max(0, Math.min(255, rgb[0] + d));
+    var green:Int = cast Math.max(0, Math.min(255, rgb[1] + d));
+    var blue:Int = cast Math.max(0, Math.min(255, rgb[2] + d));
+    return rgb2color(red, green, blue);
+  }
+
+  public static function rgb2color(red:Int, green:Int, blue:Int):Int {
+    return (red << 16) + (green << 8) + blue;
+  }
+
+  public static function color2rgb(color:Int):Array<Int> {
+    var red:Int = ((color & 0xFF0000) >>> 16);
+    var green:Int = ((color & 0x00FF00) >> 8);
+    var blue:Int = (color & 0x0000FF);
+    return [red, green, blue];
+  }
+}
\ No newline at end of file