diff --git a/docs/content/CSS/customizations/button.md b/docs/content/CSS/customizations/button.md new file mode 100644 index 00000000000..b64d9915f21 --- /dev/null +++ b/docs/content/CSS/customizations/button.md @@ -0,0 +1,223 @@ +#md-button + +![buttonsdemo](https://cloud.githubusercontent.com/assets/210413/7947020/fafde934-093f-11e5-9584-27eb2deedd0f.png) + + +The base class for all buttons is .md-button. This class is applied automatically to the md-button directive. The public base CSS of this component uses the `.md-button` class: + +```css +.md-button { + padding: 0 6px 0 6px; + margin: 6px 8px 6px 8px; + min-width: 88px; + border-radius: 3px; + font-size: 14px; + text-align: center; + text-transform: uppercase; + text-decoration:none; + border: none; + outline: none; +} +``` + +### Theme Requirements + +All Angular Material components have specific CSS rules dependent upon the **theme** name and theme-class overrides. +For example, if using the **default** theme, then each component will have a `.md-default-theme` class. Standard theme color overrides include optional classes `md-primary`, `md-accent`, and `md-warn`. + +When defining custom CSS overrides, developers should create their own class and then append it to the full class style specification for that component. For example, to define a `.btn1` override to **md-button** default theme styles, use: + +```css +.md-button.md-default-theme.btn1 { ... } /* for */ +.md-button.md-default-theme.md-primary.btn1 { ... } /* for */ +.md-button.md-default-theme.md-accent.btn1 { ... } /* for */ +.md-button.md-default-theme.md-warn.btn1 { ... } /* for */ +``` + +If you have configured a custom theme called `companyX`, then the **fully-specified** classname will be `.md-button.md-companyX-theme.btn1`. + +```css +.md-button.md-companyX-theme.btn1 { ... } /* for */ +.md-button.md-companyX-theme.md-primary.btn1 { ... } /* for */ +.md-button.md-companyX-theme.md-accent.btn1 { ... } /* for */ +.md-button.md-companyX-theme.md-warn.btn1 { ... } /* for */ +``` + + +
+##Flat Buttons + +![mdbuttonflatdefault3](https://cloud.githubusercontent.com/assets/210413/7945984/bda14884-0939-11e5-9196-131ded20ca77.png) + +```html + Button +``` +```css +.md-button.md-default-theme { + color : currentColor; +} +``` + +```css +.md-button.md-default-theme:not([disabled]):hover { + background-color: rgba(158, 158, 158, 0.2); +} +``` +```css +.md-button.md-default-theme[disabled] { + color : rgba(0, 0, 0, 0.26); + background-color: transparent; +} +``` + +
+ +#### Custom CSS Overrides + +![mdbuttonflatdefault_overrides2](https://cloud.githubusercontent.com/assets/210413/7945987/c1b1c700-0939-11e5-879c-ba804ca03267.png) + + +```html + Button +``` +```css +.md-button.md-default-theme.btn1 { + color : rgb(49, 46, 46); + background-color: rgba(255, 222, 121, 0.96); + border-radius: 10px 0 0 10px; + font-size: 16px; +} +``` + +```css +.md-button.md-default-theme.btn1:not([disabled]):hover { + background-color: rgba(107, 103, 91, 0.96); + color: white; +} +``` + +```css +.md-button.md-default-theme.btn1[disabled] { + color : rgb(187, 187, 187); + background-color: rgba(230, 230, 229, 0.96); +} +``` + +
+##Raised Buttons + +![raisedbutton](https://cloud.githubusercontent.com/assets/1292882/7254163/fe898728-e849-11e4-943b-a9cd88ec9573.PNG) + +Add the `.md-raised` class to create a raised button: + +```html +Button +``` + +```css +.md-button.md-default-theme.md-raised:not([disabled]) { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); +} +``` + +
+##Cornered buttons + +![corneredbutton](https://cloud.githubusercontent.com/assets/1292882/7254379/682592ac-e84b-11e4-8d33-78314cea8bda.PNG) + +Add the `.md-cornered` class to create a button with corners: + +```html +Button +``` + +```css +.md-button.md-default-theme.md-cornered { + border-radius: 0; +} +``` + +
+##Default FAB Button + +![floatingbutton](https://cloud.githubusercontent.com/assets/1292882/7254736/8fec7ee8-e84d-11e4-9cf9-58ea9221c3c2.PNG) + +Add the `.md-fab` class in order to create a floating action button (aka FAB): + +```html + + + +``` +```css +.md-button.md-default-theme.md-fab { + line-height: 5.6rem; + min-width: 0; + width: 5.6rem; + height: 5.6rem; + border-radius: 50%; +} +``` + +
+##Mini FAB Button + +![minibutton](https://cloud.githubusercontent.com/assets/1292882/7273617/1fcca280-e8fe-11e4-9588-231a9e860be1.PNG) + +Add add the `.md-mini` class in order to create small, mini-FAB buttons: + +```html + + + +``` + +```css +.md-button.md-default-theme.md-fab.md-mini { + line-height: 4rem; + width: 4rem; + height: 4rem; +} +``` + +
+##Icon button using SVGs + +![iconbutton](https://cloud.githubusercontent.com/assets/1292882/7273908/d701bd8a-e900-11e4-84c7-44c580c7372d.PNG) + +Create icon buttons by adding the `` class: + +```html + + + +``` +```css +.md-button.md-icon-button { + margin: 0 0.6rem; + height: 4.8rem; + min-width: 0; + line-height: 4.8rem; + padding-left: 0; + padding-right: 0; + width: 4.8rem; +} +``` + +
+##Icon button using Font-icons + + +![fonticonbutton](https://cloud.githubusercontent.com/assets/1292882/7670414/f57721ba-fcab-11e4-9a22-67970063797c.PNG) + +Here is another example of a button with font icons: + +```html + + + + +``` + +