On hover, the text in the button should not be underlined.
It currently looks like this:
- +It should eventually look like this:
diff --git a/skin.css b/skin.css index 1632a5c..99d2449 100644 --- a/skin.css +++ b/skin.css @@ -1,13 +1,79 @@ -.highlight { - background-color: #ddd; -} - -button.btn { - border-radius: 3px; - border-style: solid; - border-width: 1px; - font-weight: normal; - line-height: 1.15; - text-align: center; - vertical-align: middle; -} \ No newline at end of file +.btn--extra-large { + width: 351px; +} + +.button { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.button:hover { + cursor: default; +} + +.button--default { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.button--default:hover { + cursor: default; +} + +.btn--primary { + color: #ffffff; + background-color: #224C8B; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.btn--primary:hover { + cursor: default; +} + +.btn--secondary { + color: #B8B8B8; + background-color: #fbfbfb; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; +} + +.btn--secondary:hover { + cursor: default; +} + +.btn--large { + color: #224C8B; + background-color: #ffffff; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; + width: 270px; + padding: 25px; +} + +.btn--large:hover { + cursor: default; +} + +.btn--extra-large { + padding: 25px; +} diff --git a/skin.min.css b/skin.min.css new file mode 100644 index 0000000..66fd4d4 --- /dev/null +++ b/skin.min.css @@ -0,0 +1 @@ +.btn--extra-large{width:351px}.button{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button:hover{cursor:default}.button--default{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.button--default:hover{cursor:default}.btn--primary{color:#fff;background-color:#224C8B;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--primary:hover{cursor:default}.btn--secondary{color:#B8B8B8;background-color:#fbfbfb;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray}.btn--secondary:hover{cursor:default}.btn--large{color:#224C8B;background-color:#fff;width:175px;padding:15px 5px;border-radius:0.3rem;font-size:1rem;border:1px solid lightgray;width:270px;padding:25px}.btn--large:hover{cursor:default}.btn--extra-large{padding:25px} diff --git a/skin.scss b/skin.scss new file mode 100644 index 0000000..dfa1f83 --- /dev/null +++ b/skin.scss @@ -0,0 +1,58 @@ +$bright-orange: #ffcc66; +$orange: #d58512; +$red: #cc0000; +$white: #ffffff; +$thickness: 4px; +$background-color: #333; +$blue: #224C8B; +$lightgray: rgb(251, 251, 251); +$gray: #B8B8B8; +$width-large: 270px; +$width-extra-large: $width-large * 1.30; +$padding-large:25px; + +@mixin btn ($color, $background-color, $border-color) { + color: $color; + background-color: $background-color; + width: 175px; + padding: 15px 5px; + border-radius: 0.3rem; + font-size: 1rem; + border: 1px solid lightgray; + &:hover{ + cursor: default; + } + +} +%width-large { + width: $width-large; + + } +%padding-large { + padding: $padding-large; +} +%width-extra-large { + width: $width-extra-large; +} + +.button { + @include btn($blue, $white, $gray); +} +.button--default { + @include btn($blue, $white, $gray) +} +.btn--primary { + @include btn($white, $blue, $blue) +} +.btn--secondary { + @include btn($gray,$lightgray, $gray) +} +.btn--large { + @include btn($blue, $white, $gray); + width: $width-large; + padding: $padding-large; +} +.btn--extra-large { + @extend %width-extra-large; + padding: $padding-large; +}