{"id":681,"date":"2018-05-15T15:52:32","date_gmt":"2018-05-15T15:52:32","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=681"},"modified":"2018-08-15T21:48:48","modified_gmt":"2018-08-15T21:48:48","slug":"buttons","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/buttons\/","title":{"rendered":"Buttons *"},"content":{"rendered":"\n

Components<\/p>\n

\n\t\tButtons
\n\t<\/h1>\n

\n\t\tBase Code
\n\t<\/h2>\n

\n\t\tButtons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, modals, or pages. An example of their usage is confirming the deletion of an account in a modal.
\n\t<\/h4>\n
\r\n    <button>\r\n        Cancel\r\n    <\/button>\r\n.neon_btn_sm {\r\n  height: 24px;\r\n  border-radius: 12px;\r\n  min-width: 40px;\r\n  cursor: pointer;\r\n  font-family: Lato;\r\n  letter-spacing: 0;\r\n  text-align: center;\r\n}\r\n.neon_btn {\r\n  height: 32px;\r\n  border-radius: 24px;\r\n  min-width: 130px;\r\n  cursor: pointer;\r\n  font-family: Lato;\r\n  font-size: 14px;\r\n  letter-spacing: 0;\r\n  text-align: center;\r\n}\r\n<\/pre>\n
\n\t\tVariants
\n\t<\/h2>\n
\n\t\t
\n\t\tPrimary Button
\n\t\t<\/a>
\n\t<\/h4>\n
Used for the principal call to action on a page or modal.<\/p>\n
\r\n\/* Button-Primary *\/\r\n.neon_btn_primary {\r\n  border: 0px;\r\n  background-color: #0074D9;\r\n  color: #fff;\r\n  padding: 0px 10px;\r\n}\r\n.neon_btn_primary:hover {\r\n  border: 0px;\r\n  background-color: #00539E;\r\n  color: #fff;\r\n}\r\n.neon_btn_primary:active {\r\n  border: 0px;\r\n  background-color: #002D41;\r\n  color: #fff;\r\n}\r\n.neon_btn_primary.disabled {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n.neon_btn_primary.disabled:hover {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n.neon_btn_primary.disabled:active {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n<\/pre>\n
\n\t\t
\n\t\tSecondary Button
\n\t\t<\/a>
\n\t<\/h4>\n
Button that are used for secondary actions such as exporting a data table.<\/p>\n
\r\n\/* Button-Secondary *\/\r\n.neon_btn_secondary {\r\n  border: 1px solid #0074D9;\r\n  background-color: #fff;\r\n  color: #0074D9;\r\n  padding: 0px 10px;\r\n}\r\n.neon_btn_secondary:hover {\r\n  border: 1px solid #0074D9;\r\n  background-color: #00539e;\r\n  color: #0074D9;\r\n}\r\n.neon_btn_secondary:active {\r\n  border: 0px;\r\n  background-color: #002d41;\r\n  color: #fff;\r\n}\r\n.neon_btn_secondary.disabled {\r\n  border: 1px solid #bfbfbf;\r\n  background-color: #fff;\r\n  color: #bfbfbf;\r\n}\r\n.neon_btn_secondary.disabled:hover {\r\n  border: 1px solid #bfbfbf;\r\n  background-color: #fff;\r\n  color: #bfbfbf;\r\n}\r\n.neon_btn_secondary.disabled:active {\r\n  border: 1px solid #bfbfbf;\r\n  background-color: #fff;\r\n  color: #bfbfbf;\r\n}\r\n<\/pre>\n
\n\t\t
\n\t\tDanger Button
\n\t\t<\/a>
\n\t<\/h4>\n
Used to warn users of an irreversible action that is about to take place – such as “Delete Account”<\/p>\n
\r\n\/* Button-Danger *\/\r\n.neon_btn_danger {\r\n  border: 0px;\r\n  background-color: #dc143c;\r\n  color: #fff;\r\n  padding: 0px 10px;\r\n}\r\n.neon_btn_danger:hover {\r\n  border: 0px;\r\n  background-color: #a60f2d;\r\n  color: #fff;\r\n}\r\n.neon_btn_danger:active {\r\n  border: 0px;\r\n  background-color: #4c0715;\r\n  color: #fff;\r\n}\r\n.neon_btn_danger.disabled {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n.neon_btn_danger.disabled:hover {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n.neon_btn_danger.disabled:active {\r\n  border: 0px;\r\n  background-color: #757575;\r\n  color: #fff;\r\n}\r\n<\/pre>\n
\n\t\t
\n\t\tText Button
\n\t\t<\/a>
\n\t<\/h4>\n
Buttons that do not require primary dominance on a page. Typically initiate utilities and configurations.<\/p>\n
\t\t\t\t\"\"<\/p>\n
\r\n\/* Button-Link *\/\r\n.neon_btn_link {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: #0074D9;\r\n  padding: 0px 10px;\r\n}\r\n.neon_btn_link:hover {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: #00539e;\r\n}\r\n.neon_btn_link:active {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: #00539e;\r\n}\r\n.neon_btn_link.disabled {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: rgba(117, 117, 117, .5);\r\n}\r\n.neon_btn_link.disabled:hover {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: rgba(117, 117, 117, .5);\r\n}\r\n.neon_btn_link.disabled:active {\r\n  border: 0px;\r\n  background-color: #fff;\r\n  color: rgba(117, 117, 117, .5);\r\n}\r\n<\/pre>\n
\n\t\t
\n\t\tButtons with Icons
\n\t\t<\/a>
\n\t<\/h4>\n
Buttons can contain a combination of a clear label and an icon.\u00a0 Buttons that contain icons\u00a0 prompt additional convey more meaning, such as dropdown (down carat), create new (plus sign), delete (trashcan), etc.<\/p>\n
\r\n.neon_btn.neon_btn_dropdown {\r\n  text-align: left;\r\n}\r\n.neon_btn.neon_btn_dropdown:after {\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 5px solid transparent;\r\n  border-right: 5px solid transparent;\r\n  border-top: 5px solid;\r\n  content: \"\";\r\n  float: right;\r\n  margin-top: 8px;\r\n}\r\n.neon_btn_primary.neon_btn_dropdown:after {\r\n  border-top-color: #fff;\r\n}\r\n.neon_btn_secondary.neon_btn_dropdown:after {\r\n  border-top-color: #0074D9;\r\n}\r\n<\/pre>\n
\n\t\t
\n\t\tIcon Buttons
\n\t\t<\/a>
\n\t<\/h4>\n
Icon buttons are used in submenu and expansion menus in order to conserve space. Upon hover and selection the icon button turns blue and includes a CSS animation.<\/p>\n
\t\t\t\t\"Group<\/p>\n
\r\n  .navigation_panel_circle_style {\r\n    height: 48px;\r\n    width: 48px;\r\n    border-radius: 24px;\r\n    font-size: 16px;\r\n    line-height: 18px;\r\n    background-color: #F4F6F9;\r\n    position: relative;\r\n    color: #002D41;\r\n  }\r\n  .navigation_panel_circle_style:after {\r\n    position: absolute;\r\n    pointer-events: none;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    content: '';\r\n    box-sizing: content-box;\r\n  }\r\n  .navigation_panel_circle_style:after {\r\n    top: -3px;\r\n    left: -3px;\r\n    padding: 3px;\r\n    box-shadow: 0 0 0 4px #0074D9;\r\n    transition: transform 0.2s, opacity 0.2s;\r\n    transform: scale(.8);\r\n    opacity: 0;\r\n  }\r\n  .navigation_panel_circle_style {\r\n    transition: background 0.2s, color 0.2s;\r\n  }\r\n<\/pre>\n
\n\t\t
\n\t\tLike Button
\n\t\t<\/a>
\n\t<\/h4>\n
The like button is used to favorite an account so the user may have quicker access in the future.<\/p>\n
\tSee the Pen Heart Button<\/a> by Robin (@robinmckayneon<\/a>) on CodePen<\/a>.<\/p>\n
\n\t\t
\n\t\tClose Button
\n\t\t<\/a>
\n\t<\/h4>\n
The close button is used to close modals and panels. It is found in the top right corner of the object it is closing.<\/p>\n
\tSee the Pen close icon animations<\/a> by Robin (@robinmckayneon<\/a>) on CodePen<\/a>.<\/p>\n
\r\n  <div>\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 12 12\"><title>Close<\/title><polygon points=\"12 1.4 10.6 0 6 4.6 1.4 0 0 1.4 4.6 6 0 10.6 1.4 12 6 7.4 10.6 12 12 10.6 7.4 6 12 1.4\"\/><\/svg>\r\n  <\/div>\r\n.icon-close {\r\n  position: absolute;\r\n  top: 1.2rem;\r\n  right: 1.2rem;\r\n  width: $base-spacing;\r\n  height: $base-spacing;\r\n  cursor: pointer;\r\n  line-height: 0;\r\n  fill: rgba(white, .85);\r\n  backface-visibility: hidden;\r\n  will-change: fill, transform;\r\n  transition: fill .1s ease-in-out, transform .1s ease-out;\r\n  &:hover {\r\n    fill: white;\r\n  }\r\n  &.scale {\r\n    transform: scale3d(0.6,0.6,0.6);\r\n    &:hover {\r\n      transform: scale3d(0.8,0.8,0.8);\r\n    }\r\n  }\r\n  &.rotate {\r\n    transform: rotate3d(0,0,1, 45deg);\r\n    &.rotate-cw:hover {\r\n      transform: rotate3d(0, 0, 1, 0deg);\r\n    }\r\n    &.rotate-ccw:hover {\r\n      transform: rotate3d(0, 0, 1, 90deg);\r\n    }\r\n  }\r\n}\r\n\/* Example to change icon color *\/\r\n#miniMenu .icon-close {\r\n  fill: rgba(black, .85);\r\n  &:hover {\r\n    fill: black;\r\n  }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Components Buttons Base Code Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, modals, or pages. An example of their usage is confirming the deletion of an account in a modal. <button> Cancel <\/button> .neon_btn_sm { height: 24px; border-radius: 12px;…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":23,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/681\/revisions\/1366"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}