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
Default button
- Text color:
#333
- Background color:
#fff
- Border color:
#ccc
- Border radius:
6px
- Padding:
6px 30px
- Font size:
14px
- Font family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Hover
- Background color:
#e6e6e6
- Border color:
#adadad
Active
- Background color:
#e6e6e6
- Border color:
#adadad
- Box shadow:
inset 0 3px 5px rgba(0,0,0,.125)
Focus
- Background color:
#e6e6e6
- Border color:
#8c8c8c
- Outline:
thin dotted
- Outline offset:
-2px
Visited
- Text color:
#5d396e
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
#8 - Wiki
White
- Background color:
#eee
- Text color:
#333
- Border color:
1px solid #d5d0d0
- Font family:
Source Sans Pro
Mockups
Buttons are used for actions in the websites. The primary buttons should use the default buttons type, in GNOME Blue. There are many other variations, such as colors, sizes, and shapes that can be combined and used as secondaries, tertiaries... etc. Some colors can be used to draw user's attention (such as red for danger, orange or yellow for warning and green for success).
Default
Outline
Squared
Other sizes
Disabled
Links & text
Customized width
When the buttons are placed in row direction, they need to be in the same width. It also happens if you want to align your button with an input or any other element above your button.
Edited by Clarissa Lima Borges