diff --git a/components/button/button.drip.tsx b/components/button/button.drip.tsx
index ba78a64..99e52f3 100644
--- a/components/button/button.drip.tsx
+++ b/components/button/button.drip.tsx
@@ -54,10 +54,10 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
 
         svg {
           position: absolute;
-          animation: 400ms ease-in expand;
+          animation: 350ms ease-in expand;
           animation-fill-mode: forwards;
-          width: 20px;
-          height: 20px;
+          width: 1rem;
+          height: 1rem;
         }
 
         @keyframes expand {
@@ -72,7 +72,7 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
             opacity: 0.5;
           }
           100% {
-            transform: scale(25);
+            transform: scale(28);
             opacity: 0;
           }
         }
diff --git a/components/button/styles.ts b/components/button/styles.ts
index 884c9e3..78c4486 100644
--- a/components/button/styles.ts
+++ b/components/button/styles.ts
@@ -287,5 +287,5 @@ export const getButtonDripColor = (palette: ZeitUIThemesPalette, props: ButtonPr
   const { type } = props
   const isLightHover = type.endsWith('light')
   const hoverColors = getButtonHoverColors(palette, props)
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : palette.accents_2
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65)
 }
diff --git a/pages/en-us/components/button.mdx b/pages/en-us/components/button.mdx
index 776eea7..8153565 100644
--- a/pages/en-us/components/button.mdx
+++ b/pages/en-us/components/button.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Button, Spacer } from 'components'
+import { Button, Spacer, Grid } from 'components'
 import Router from 'next/router'
 import Settings from '@zeit-ui/react-icons/settings'
 import UserX from '@zeit-ui/react-icons/userX'
@@ -50,15 +50,19 @@ Used to trigger an operation.
 <Playground
   title="Types"
   desc="Different state."
-  scope={{ Button, Spacer }}
+  scope={{ Button, Spacer, Grid }}
   code={`
-<>
-  <Button type="secondary">Secondary</Button> <Spacer y={.5} />
-  <Button type="success">Success</Button> <Spacer y={.5} />
-  <Button type="warning">Warning</Button> <Spacer y={.5} />
-  <Button type="error">Error</Button> <Spacer y={.5} />
-  <Button type="abort">Abort</Button>
-</>
+<Grid.Container gap={2}>
+  <Grid><Button auto type="secondary">Secondary</Button></Grid>
+  <Grid><Button auto type="success">Success</Button></Grid>
+  <Grid><Button auto type="warning">Warning</Button></Grid>
+  <Grid><Button auto type="error">Error</Button></Grid>
+  <Grid><Button auto type="abort">Abort</Button></Grid>
+  <Grid><Button auto type="secondary-light">Secondary Ligth</Button></Grid>
+  <Grid><Button auto type="success-light">Success Ligth</Button></Grid>
+  <Grid><Button auto type="warning-light">Warning Ligth</Button></Grid>
+  <Grid><Button auto type="error-light">Error Ligth</Button></Grid>
+</Grid.Container>
 `} />
 
 <Playground
@@ -74,7 +78,6 @@ Used to trigger an operation.
 </>
 `} />
 
-
 <Playground
   title="Sizes"
   desc="Buttons of different sizes."
@@ -132,6 +135,7 @@ Used to trigger an operation.
 
 ```ts
 type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
+  | 'secondary-light' | 'success-light' | 'warning-light' | 'error-light'
 ```
 
 <Attributes.Title>NormalSizes</Attributes.Title>
diff --git a/pages/zh-cn/components/button.mdx b/pages/zh-cn/components/button.mdx
index 8505d6d..1966327 100644
--- a/pages/zh-cn/components/button.mdx
+++ b/pages/zh-cn/components/button.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Button, Spacer } from 'components'
+import { Button, Spacer, Grid } from 'components'
 import Router from 'next/router'
 import Settings from '@zeit-ui/react-icons/settings'
 import UserX from '@zeit-ui/react-icons/userX'
@@ -49,15 +49,19 @@ export const meta = {
 <Playground
   title="类型"
   desc="不同状态下的按钮。"
-  scope={{ Button, Spacer }}
+  scope={{ Button, Grid }}
   code={`
-<>
-  <Button type="secondary">次要的</Button> <Spacer y={.5} />
-  <Button type="success">成功</Button> <Spacer y={.5} />
-  <Button type="warning">警告</Button> <Spacer y={.5} />
-  <Button type="error">错误</Button> <Spacer y={.5} />
-  <Button type="abort">中止</Button>
-</>
+<Grid.Container gap={2}>
+  <Grid><Button auto type="secondary">次要的</Button></Grid>
+  <Grid><Button auto type="success">成功</Button></Grid>
+  <Grid><Button auto type="warning">警告</Button></Grid>
+  <Grid><Button auto type="error">错误</Button></Grid>
+  <Grid><Button auto type="abort">中止</Button></Grid>
+  <Grid><Button auto type="secondary-light">次要的 浅色</Button></Grid>
+  <Grid><Button auto type="success-light">成功 浅色</Button></Grid>
+  <Grid><Button auto type="warning-light">警告 浅色</Button></Grid>
+  <Grid><Button auto type="error-light">错误 浅色</Button></Grid>
+</Grid.Container>
 `} />
 
 <Playground
@@ -131,6 +135,7 @@ export const meta = {
 
 ```ts
 type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
+  | 'secondary-light' | 'success-light' | 'warning-light' | 'error-light'
 ```
 
 <Attributes.Title>NormalSizes</Attributes.Title>