{"id":23318,"date":"2020-11-16T06:37:01","date_gmt":"2020-11-16T06:37:01","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=23318"},"modified":"2020-11-16T06:56:14","modified_gmt":"2020-11-16T06:56:14","slug":"material-2-0-bottom-toolbar-motion-design-interaction","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/material-2-0-bottom-toolbar-motion-design-interaction\/","title":{"rendered":"MATERIAL 2.0 BOTTOM TOOLBAR MOTION DESIGN &#038; INTERACTION"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Vlad Racoare<\/li><li>November 6, 2019<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS \/ JS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is a nice and simple Motion Design Interaction for a bottom toolbar created using the cutout that came in Material Design 2.0 for the call to action buttons (or FAB). This is mixture of both the bottom toolbar and the bottom tab bar.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> No<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> font-awesome.css<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/vladracoare\/share\/zip\/RwwMqBL\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/vladracoare\/pen\/RwwMqBL\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Vlad Racoare November 6, 2019 Made with: HTML \/ CSS \/ JS About the code: This is a nice and simple Motion Design Interaction for a bottom toolbar created using the cutout that came in Material Design 2.0 for the call to action buttons (or FAB). This is mixture of both the bottom toolbar and the bottom tab bar. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: No Dependencies: font-awesome.css<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":23319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6500],"tags":[5935,2388,6504,6501,6026],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/23318"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=23318"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/23318\/revisions"}],"predecessor-version":[{"id":23320,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/23318\/revisions\/23320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/23319"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=23318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=23318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=23318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}