{"id":1110,"date":"2014-10-08T19:06:07","date_gmt":"2014-10-09T02:06:07","guid":{"rendered":"http:\/\/benlevywebdesign.com\/blog\/?p=1110"},"modified":"2019-03-03T12:51:21","modified_gmt":"2019-03-03T20:51:21","slug":"buttons-buttons-buttons","status":"publish","type":"post","link":"https:\/\/benmlevy.com\/blog\/buttons-buttons-buttons\/","title":{"rendered":"Buttons, Buttons, Buttons"},"content":{"rendered":"<p>This is my first dive into using <strong>scss<\/strong> and <strong>sass\u00a0<\/strong>(Syntactically Awesome Style Sheets)<strong>.<\/strong>\u00a0My task was to make some buttons. This what my buttons look like and how they turned out. Notice the disabled button is the same size of the medium button but is opaque telling you its not clickable therefore disabled.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1115 size-full\" src=\"http:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2014\/10\/Buttons.png\" alt=\"Buttons\" width=\"800\" height=\"350\" \/><\/p>\n<p>This is an interesting and fun way to create a variety of buttons.<\/p>\n<p>Here is what the hover states of the buttons would look like. Some of the hover states are lighter and some are darker.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1120 size-full\" src=\"http:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2014\/10\/Buttons_Hovers.png\" alt=\"Buttons_Hovers\" width=\"800\" height=\"350\" \/><\/p>\n<p>Now, why would I want to create all these buttons? Having these button styles not only saves me time when creating webpages where buttons are needed but, it also allows me to change one button style\u00a0and anywhere I use that same button style it will update. To have a button is simple, One line of HTML code, the correct class name for the style I want, and everything else is magic.<\/p>\n<p>Play around with the test buttons below and see for yourself how they work.<\/p>\n<h2>Notification Buttons<\/h2>\n<p><button class=\"btn btn-default\">Default button<\/button> <button class=\"btn btn-success\">Success<\/button> <button class=\"btn btn-danger\">Danger<\/button> <button class=\"btn btn-info\">Important Info!<\/button> <button class=\"btn btn-warning\">This is a Warning!<\/button><\/p>\n<h2>Default Button Sizes<\/h2>\n<p><button class=\"btn btn-xs\">Extra small button default<\/button> <button class=\"btn btn-sm\">Small button default<\/button> <button class=\"btn btn-md\">Medium button default<\/button> <button class=\"btn btn-lg\">Large button default<\/button><\/p>\n<h2>Border Only Buttons<\/h2>\n<p><button class=\"btn btn-xs-outline\">Extra small button default<\/button> <button class=\"btn btn-sm-outline\">Small button default<\/button> <button class=\"btn btn-md-outline\">Medium button default<\/button> <button class=\"btn btn-lg-outline\">Large button default<\/button><\/p>\n<h2>Disabled Button<\/h2>\n<p><button class=\"btn btn-md\" disabled=\"disabled\">Disabled button default<\/button> <button class=\"btn btn-md-outline\" disabled=\"disabled\">Disabled button default<\/button><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is my first dive into using scss and sass\u00a0(Syntactically Awesome Style Sheets).\u00a0My task was to make some buttons. This what my buttons look like and how they turned out. Notice the disabled button is the same size of the medium button but is opaque telling you its not clickable therefore disabled. This is an<a class=\"read-more \" href=\"https:\/\/benmlevy.com\/blog\/buttons-buttons-buttons\/\" title=\"Read More\"> <span class=\"button default\">Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1112,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-collab-web-design"],"_links":{"self":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/comments?post=1110"}],"version-history":[{"count":31,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions\/1474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/media\/1112"}],"wp:attachment":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/media?parent=1110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/categories?post=1110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/tags?post=1110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}