diff --git a/public/input/button/Button.jsx b/public/input/button/Button.jsx index f5c5ec0..04f3ab1 100644 --- a/public/input/button/Button.jsx +++ b/public/input/button/Button.jsx @@ -80,7 +80,9 @@ export default class Button extends React.Component { href={href} to={to} > - {contents} + + {contents} + ); } diff --git a/public/styles/elements/all.scss b/public/styles/elements/all.scss index f4b849a..ac4bd14 100644 --- a/public/styles/elements/all.scss +++ b/public/styles/elements/all.scss @@ -5,6 +5,6 @@ * Version: * 1.0.0 - 2018/05/03 */ -* { +*,*:after,*:before,*::after,*::before { box-sizing: border-box; } diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss index d6835a0..104efe9 100644 --- a/public/styles/objects/_button.scss +++ b/public/styles/objects/_button.scss @@ -12,18 +12,53 @@ * 1.0.1 - 2018/05/14 */ +//Default Button (applies to all styles) .o-btn { position: relative; display: inline-block; cursor: pointer; - border: $s-color--btn-default__border; - padding: 1em 1em; - transition: all 0.2s $s-animation--ease-out; + padding-bottom: 0.5em; + overflow: hidden; - @include t-horizontal-gradient($s-color--btn-default__top, $s-color--btn-default__bottom); + &::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 50%; + border: $s-color--btn-default__border; + border-radius: 0.5em; + background: $s-color--btn-default__bottom; + } + &__inner { + position: relative; + background: white; + display: block; + padding: 0.75em 1.5em; + border-radius: 0.5em; + border: $s-color--btn-default__border; + transition: all 0.1s $s-animation--ease-out; + } &:hover { - @include t-vertical-gradient($s-color--btn-default-hover__top, $s-color--btn-default-hover__bottom); + .o-btn__inner { + @include t-translate-y(0.1em); + } + } + + &:active { + .o-btn__inner { + @include t-translate-y(0.4em); + background: $s-color--btn-default-hover__top; + } + } + + &:focus { + &::before, + .o-btn__inner { + border-color: $s-color--btn-default__focus; + } } } diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 8f46ae7..97906f0 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -48,6 +48,6 @@ $s-color--loader: $s-color--swatch-blue; $s-color--btn-default__top: #FFF; $s-color--btn-default__bottom: #FBFBFB; $s-color--btn-default__border: 1px solid #DDD; +$s-color--btn-default__focus: $s-color--swatch-blue; $s-color--btn-default-hover__top: $s-color--btn-default__bottom; -$s-color--btn-default-hover__bottom: #EEE;