{"id":14013,"date":"2016-08-23T23:14:04","date_gmt":"2016-08-23T21:14:04","guid":{"rendered":"https:\/\/tazintosh.com\/en\/controles-segmentes-full-css\/"},"modified":"2018-02-08T15:47:04","modified_gmt":"2018-02-08T14:47:04","slug":"full-css-segmented-controls","status":"publish","type":"post","link":"https:\/\/vpn.tazintosh.com\/en\/full-css-segmented-controls\/","title":{"rendered":"Full CSS Segmented Controls"},"content":{"rendered":"

When I've designed our company Homepage<\/a>, we had from one to three buttons to present for each of our apps, depending the case. I wanted to avoid using separate buttons for aesthetic reasons because to me, a unique \u201ccapsule\u201d look was more elegant and interesting to use. So I went for the so called \u201csegmented Controls\u201d solution. Most of the time, it's a simple horizontal button look made of multiple segments. Note that it could be vertical.<\/p>\r\n

\"Segmented<\/div><\/figure>\r\n

The Segmented Controls are nice to build menus or multiple buttons that visually works when next to each other.
\r\nNo matter the number of elements you'll add to your group, the look you'll could design for the first, the last, and the in between elements will always apply without having to add any specific class on them.<\/p>\r\n

Requirements<\/h1>\r\n

On the HTML side, it's fairly simple, just create a parent element that will contain all your segments.
\r\n(In my case .taz_sgmtGrp<\/code> and .taz_sgmtBtn<\/code>).<\/p>\r\n

\r\n<div class=\"taz_sgmtGrp\">\r\n\t<button class=\"taz_sgmtBtn\">Action 1<\/button>\r\n\t<button class=\"taz_sgmtBtn\">Action 2<\/button>\r\n\t<button class=\"taz_sgmtBtn\">Action 3<\/button>\r\n<\/div>\r\n\/\/ Works the same with a list (ie. in a menu), or anything else.\r\n<ul class=\"taz_sgmtGrp\">\r\n\t<li class=\"taz_sgmtBtn\"><a href=\"#\">Action 1<\/a><\/li>\r\n\t<li class=\"taz_sgmtBtn\"><a href=\"#\">Action 2<\/a><\/li>\r\n\t<li class=\"taz_sgmtBtn\"><a href=\"#\">Action 3<\/a><\/li>\r\n<\/ul><\/pre>\r\n
On the CSS side, the best you know this language, the most you'll be able to play around.
\r\nHere, everything is fully styled using CSS, no image has been used.<\/p>\r\n
Note<\/h1>\r\n
Check-out the CSS code of each style variants. Depending on what you want to achieve, you'll have to style only the buttons or both the buttons and their parent. Also, some designs will better work if a button never jump to next line because of a narrow window width.<\/p>\r\n
\nSee the Pen Segmented Controls by \u00c9douard Puginier (@Tazintosh) on CodePen.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Segmented Controls are nice to build menus or multiple buttons that visually works when next to each other no matter the number of elements you add.<\/p>\n","protected":false},"author":1,"featured_media":14001,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1237,1255,1258,2047],"tags":[2058,2399],"class_list":["post-14013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article-tutorials-diy","category-free-downloads","category-free-downloads-ui-web-design","category-webdesign-en","tag-css-en","tag-scss-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts\/14013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/comments?post=14013"}],"version-history":[{"count":0,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts\/14013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/media\/14001"}],"wp:attachment":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/media?parent=14013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/categories?post=14013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/tags?post=14013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}