Updated Evaluation of Buttons
Table of contents
Evaluation
#1 - Main Website
-
Includes buttons that actually are not using the HTML tag "button" but behave like as they were
-
Also, the buttons were named after their classes
Block button
- border-radius:
8px
- background-color:
#1a5fb4
- font-size:
1.125em
- padding:
calc(0.667em + 2px) calc(1.333em + 2px)/ 14.006px 25.994px
- text-align:
center
- font-weight:
400
- line-height:
27px
- font-family:
"Source Sans Pro"
- font-size:
18px
- text-color:
#ffffff
Hover
No change
Active
No change
Focus
No change
Visited
No change
Hamburger button
Close button
Primary button
- Text color:
#fff
- Background color:
#337ab7
- Border color:
#2e6da4
- Border radius:
6px
- Padding:
6px 30px
- Font size:
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Hover
- Background color:
#286090
- Border color:
#204d74
Active
- Background color:
#286090
- Border color:
#204d74
- Box shadow:
inset 0 3px 5px rgba(0,0,0,.125)
Focus
- Background color:
#286090
- Border color:
#122b40
- Outline:
thin dotted
- Outline offset:
-2px
Success button
- Text color:
#fff
- Background color:
#4e9a06
- Border color:
#4cae4c
- Padding:
15px
- Font size (title):
23px
- Font size (body):
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Active
- Background color:
#449d44
- Border color:
#398439
- Box shadow:
inset 0 3px 5px rgba(0,0,0,.125)
Focus
- Background color:
#449d44
- Border color:
#255625
- Outline:
thin dotted
- Outline offset:
-2px
#2 - Extensions
Default button
- Text color:
#333
- Background color:
#fff
- Border:
1px solid #ccc
- Padding:
3px
- Width:
100%
- Font size (body):
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Hover
- Background color:
#e6e6e6
Active
- Box shadow:
inset 0 3px 5px rgba(0, 0, 0, .125)
- Background color:
#e6e6e6
Focus
- Background color:
#e6e6e6
- Border color:
#66afe9
- Outline offset:
-2px
Primary button
- Text color:
#fff
- Background color:
#286090
- Border:
1px solid #ccc
- Padding:
3px
- Width:
100%
- Font size (body):
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Hover
- Background color:
#286090
Active
- Box shadow:
inset 0 3px 5px rgba(0, 0, 0, .125)
- Background color:
#286090
Focus
- Background color:
#286090
- Border color:
#66afe9
- Outline offset:
-2px
Success button
- Text color:
#fff
- Background color:
#286090
- Border color:
#4cae4c
- Padding:
6px 12px
- Font size (body):
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Hover
- Background color:
#449d44
- Border color:
#398439
Active
- Box shadow:
inset 0 3px 5px rgba(0, 0, 0, .125)
- Background color:
#449d44
- Border color:
#398439
Focus
- Background color:
#449d44
- Border color:
#255625
- Outline offset:
-2px
Hamburguer button
User options button
Configure button
Remove button
Upgrade button
#3 - Events Portal
Default button
- Text color:
#333
- Background color:
#fff
- Border color:
#ccc
- Padding:
0.2em 0.7em 0.1em 0.7em
- Font size:
13px
- Font family:
'Helvetica Neue', Helvetica, Verdana, Arial, Sans
Hover
- Background color:
#e6e6e6
- Border color:
#adadad
Active
- Text color:
#fff
- Box shadow:
1px 1px 4px rgba(20, 20, 20, 0.1) inset
- Background color:
#0086b3
- Border color:
#007cac
- Background gradient:
linear-gradient(to bottom, #0086b3, #09c)
Grey button
- Text color:
#777
- Background color:
#ececec
- Border color:
#dfdfdf
- Padding:
0.2em 0.7em 0.1em 0.7em
- Font size:
13px
- Font family:
'Helvetica Neue', Helvetica, Verdana, Arial, Sans
Hover
- Text color:
#555
- Background color:
#ececec
- Background gradient:
linear-gradient(to bottom, #ececec, #e0e0e0)
- Border color:
#bbb
- Box shadow:
1px 1px 4px rgba(20, 20, 20, 0.1)
Active
- Box shadow:
1px 1px 4px rgba(20, 20, 20, 0.1) inset
#4 - Planet
Green button
- Text color:
#fff
- Background color:
linear-gradient(to bottom, #73d216 0%, #4cae4c 100%)
- Border:
1px solid #555753
- Font family:
Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial
#5 - Discourse
Default
- Icon
- Background color:
#e9e9e9
- Text color:
#333
- Font family:
Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial
Hover
- Background color:
#919191
- Text color:
#fff
Active
- Background color:
#bababa
- Background gradient:
linear-gradient(to bottom, #bababa, #e9e9e9)
Flat
- Icon
- Background color:
transparent
#7 - Surveys
Primary
- Background color:
#4a86cf
- Border color:
#306CB5
- Text color:
#fff
- Font family:
Helvetica Neue, Helvetica, Arial
Hover
- Background color:
#286090
- Border color:
#204d74
Default
- Background color:
#fff
- Border color:
#ccc
- Text color:
#333
- Font family:
Helvetica Neue, Helvetica, Arial
Hover
- Background color:
#e6e6e6
- Border color:
#adadad
#6 - Developer Center
Small gap blue button
- padding:
0.6rem 3rem
- width:
80%
- margin:
1rem auto/ 10.8px 54px
- max-width:
14em
- background:
linear-gradient(0deg, #3584e4 0%, #62a0ea 100%)
- color:
white
- background:
linear-gradient(0deg, #3584e4 0%, #62a0ea 100%)
- color:
white
- text-align:
center
- font-weight:
bold/700
- cursor:
pointer
- font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- transition-delay:
0s
- transition-duration:
0.35s
Hover
- transform:
scale(1.05)
Active
- transform:
scale(0.98)
Focus-visible
#8 - Wiki
White
- Background color:
#eee
- Text color:
#333
- Border color:
1px solid #d5d0d0
- Font family:
Source Sans Pro
#8 - Apps
None
#9 - Forty
None
#10 - Os
Large Download button
- width:
12em/ 259.2px
- padding:
0.9em 3em/ 19.44px 64.8px
- font-size:
1.2em/ 21.6px
- color:
white
- display:
block
- border-radius:
99999px
- margin:
0 auto
- text-align:
center
- font-weight:
bold/700
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6/34.56px
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- background:
linear-gradient(0deg, #3584e4 0%, #62a0ea 100%)
- cursor:
pointer
Hover
- transform:
scale(1.05)
Active
- transform:
scale(0.98)
Focus-visible
Small white button
- background:
linear-gradient(0deg, #c0bfbc 0%, #f6f5f4 100%)
- color:
#241f31
- width:
50%
- margin:
1rem auto
- max-width:
14em
- font-weight:
600
- padding:
0.6rem 2rem/ 10.8px 36px
- display:
block
- border-radius:
99999px
- text-align:
center
- font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- max-width:
252px
Hover
- transform:
scale(1.05)
Active
- transform:
scale(0.98)
Focus-visible
Small red button
- background:
linear-gradient(0deg, #c01c28 0%, #ed333b 100%)
- color:
white
- width:
50%
- margin:
1rem auto
- max-width:
14em
- font-weight:
600
- padding:
0.6rem 2rem/ 10.8px 36px
- display:
block
- border-radius:
99999px
- text-align:
center
- font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- max-width:
252px
Hover
- transform:
scale(1.05)
Active
- transform:
scale(0.98)
Focus-visible
Small blue button
- background:
linear-gradient(0deg, #3584e4 0%, #62a0ea 100%)
- color:
white
- width:
50%
- margin:
1rem auto
- max-width:
14em
- font-weight:
600
- padding:
0.6rem 2rem/ 10.8px 36px
- display:
block
- border-radius:
99999px
- text-align:
center
- font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- max-width:
252px
Hover
- transform:
scale(1.05)
Active
- transform:
scale(0.98)
Focus-visible
#11 - Circle
Green button
- width:
12em
- padding:
0.9em 3em/ 22.68px 75.6px
- font-size:
1.4em
- background:
linear-gradient(0deg, var(--green5) 0%, var(--green3) 100%)
- color:
white
- display:
block
- border-radius:
99999px
- margin:
16px auto
- text-align:
center
- font-weight:
bold/700
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- width:
302.4px
Hover
- transform:
scale(1.05)
- cursor:
pointer
Active
- transform:
scale(0.98)
Focus-visible
#12 - Release
None
Mockups
Edited by Pooja Patel