Add styling for buttons.

Adds the CSS that follows roma's button design.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/2159004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@48231 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 44 insertions, 0 deletions

diff --git a/chrome/browser/resources/shared/css/button.css b/chrome/browser/resources/shared/css/button.css
new file mode 100644
index 0000000..e04130a
--- /dev/null
+++ b/chrome/browser/resources/shared/css/button.css
@@ -0,0 +1,44 @@
+button {
+  padding: 5px 8px;
+  border: 1px solid rgba(0, 0, 0, .50);
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .10);
+  background: -webkit-gradient(linear, 0 50%, 0 100%,
+                               from(#ffffff), to(#e3e3e3));
+}
+
+button:active {
+  background: -webkit-gradient(linear, 0 4%, 0 100%,
+                               from(#c3c3c3), to(#f5f5f5));
+}
+
+button:focus {
+  /* TODO(feldstein): find a better way to keep buttons same size. */
+  padding: 4px 7px;
+  outline: none;
+  border: 2px solid #426dc9;
+}
+
+button:disabled {
+  border: 1px solid rgba(0, 0, 0, .35);
+  color: rgba(0, 0, 0, .30);
+  background: -webkit-gradient(linear, 0 0, 0 100%,
+                               from(#ffffff), to(#e3e3e3));
+}
+
+button.action {
+  border: 1px solid #2e4987;
+  font-weight: bold;
+  color: #ffffff;
+  background: -webkit-gradient(linear, 0 0, 0 100%,
+                               from(#6391de), to(#426dc9));
+}
+
+button.action:focus {
+  border: 2px solid #426dc9;
+}
+
+button.action:active {
+  background: -webkit-gradient(linear, 0 0, 0 100%,
+                               from(#426dc9), to(#6391de));
+}
\ No newline at end of file