diff --git a/src/components/Button.js b/src/components/Button.js
index b3e3795..6870663 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -59,20 +59,12 @@ function getColor(props) {
   return colorGetter(props, 'primaryColor'); // default
 }
 
-function getAlignement(props) {
-  if (props.align === 'center') return '0px auto';
-  if (props.align === 'right') return '0px 0px 0px auto';
-  if (props.align === 'left') return '0px auto 0px 0px';
-  return '0px';
-}
-
 const ButtonWrapper = styled.button`
   outline: none;
   font-size: 1rem;
   padding: 8px 16px;
   font-weight: normal;
   width: ${props => props.w || 'auto'};
-  margin: ${props => getAlignement(props)};
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   border-style: solid;
   border-width: ${props => props.outline && !props.clear ? '1px' : '0px'};
diff --git a/src/components/withRipple.js b/src/components/withRipple.js
index e7b251a..63fc53b 100644
--- a/src/components/withRipple.js
+++ b/src/components/withRipple.js
@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+function getAlignement(props) {
+  if (props.align === 'center') return '0px auto';
+  if (props.align === 'right') return '0px 0px 0px auto';
+  if (props.align === 'left') return '0px auto 0px 0px';
+  return '0px';
+}
+
 const RippleWrapper = styled.div`
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   display: inline-block;
   align-self: flex-start;
+  margin: ${props => getAlignement(props)};
 
   &:after {
     content: "";
@@ -32,12 +40,13 @@ const RippleWrapper = styled.div`
   }
 `;
 
+
 /* eslint-disable react/prefer-stateless-function */
 const withRipple = (Comp) => {
   return class RippleProvider extends Component {
     render() {
       return (
-        <RippleWrapper>
+        <RippleWrapper align={this.props.align}>
           <Comp {...this.props} />
         </RippleWrapper>
       );