{"id":37004,"date":"2019-07-18T18:19:35","date_gmt":"2019-07-18T10:19:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37004"},"modified":"2019-07-16T22:09:27","modified_gmt":"2019-07-16T14:09:27","slug":"css-buttons-bttncss","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/","title":{"rendered":"Bttn.css – Awesome CSS Buttons Under 4Kb"},"content":{"rendered":"

With so many free CSS snippets and code generators<\/a><\/strong>, there\u2019s no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple page elements such as navigation menus and buttons.<\/p>\n

Read Also:<\/strong> UI Design: Glossy Buttons with CSS3 Gradient<\/a><\/p>\n

One such library is Bttn.css<\/a><\/strong>, created by developer Ganapati V S<\/a>. His work is exquisite and this button library is one of the best for modern frontend development.<\/p>\n

On the buttons homepage<\/a>, you can select between extra small<\/strong>, small, medium, and large sizes<\/strong>, along with various color schemes<\/strong>. The buttons come pre-built<\/strong> and ready to go<\/strong>, so all you need is the actual CSS library and the right classes for your buttons.<\/p>\n

\"btncss\"<\/p>\n

You can download the library from GitHub<\/a><\/strong> or you can use the CDN version<\/a><\/strong> for local testing. It even works in cloud IDEs<\/a><\/strong> such as CodePen if you wanna give it a go in your browser.<\/p>\n

Bttn.css is actually a smaller library, offering about 13 different styles<\/strong>. Some of these include material styles, gradients, ghost buttons, and the traditional pill buttons using CSS3 rounded borders.<\/p>\n

Note this library is similar to the Butns library<\/a><\/strong> in using a shortened spelling of \u201cbuttons\u201d and pure CSS code.<\/p>\n

However, Bttn.css offers varying styles of buttons<\/strong>, rather than one large library of similar elements. This is one reason I recommend Bttn.css for pretty much any web project\u2014out of all 13 styles, you\u2019re bound to find something that fits.<\/p>\n

\"Bttn.css<\/a><\/figure>\n

You can read more in this Medium post<\/a>, penned by the creator of Bttn.css. He explains why he made the library<\/strong> and what purpose it serves<\/strong> in a typical development project.<\/p>\n

If you\u2019re looking for more complete documentation<\/strong> take a peek at the GitHub repo<\/a><\/strong>. It lists all the CSS classes for styles, sizes, and colors, along with install details using the CDN or a package manager such as Bower<\/a>.<\/p>\n

Be sure to also check out the demo page<\/a><\/strong> to see what this library can do. And feel free to share your thoughts with the creator on his Twitter @ganapativs<\/a>.<\/p>\n

Read Also:<\/strong> \u201cCall to Action\u201d Buttons: Guidelines, Best Practices and Examples<\/a><\/p>","protected":false},"excerpt":{"rendered":"

With so many free CSS snippets and code generators, there\u2019s no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple page elements such as navigation menus and buttons. Read Also: UI Design: Glossy Buttons with CSS3 Gradient One such library is Bttn.css, created by developer Ganapati V S. His work…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,4109],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBttn.css - Awesome CSS Buttons Under 4Kb - Hongkiat<\/title>\n<meta name=\"description\" content=\"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bttn.css - Awesome CSS Buttons Under 4Kb\" \/>\n<meta property=\"og:description\" content=\"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-18T10:19:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Bttn.css – Awesome CSS Buttons Under 4Kb\",\"datePublished\":\"2019-07-18T10:19:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/\"},\"wordCount\":362,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-buttons-bttncss\\\/btncss.jpg\",\"keywords\":[\"CSS\",\"CSS Frameworks\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/\",\"name\":\"Bttn.css - Awesome CSS Buttons Under 4Kb - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-buttons-bttncss\\\/btncss.jpg\",\"datePublished\":\"2019-07-18T10:19:35+00:00\",\"description\":\"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-buttons-bttncss\\\/btncss.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-buttons-bttncss\\\/btncss.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-buttons-bttncss\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bttn.css – Awesome CSS Buttons Under 4Kb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bttn.css - Awesome CSS Buttons Under 4Kb - Hongkiat","description":"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/","og_locale":"en_US","og_type":"article","og_title":"Bttn.css - Awesome CSS Buttons Under 4Kb","og_description":"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple","og_url":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-18T10:19:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Bttn.css – Awesome CSS Buttons Under 4Kb","datePublished":"2019-07-18T10:19:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/"},"wordCount":362,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg","keywords":["CSS","CSS Frameworks"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/","url":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/","name":"Bttn.css - Awesome CSS Buttons Under 4Kb - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg","datePublished":"2019-07-18T10:19:35+00:00","description":"With so many free CSS snippets and code generators, there's no need to reinvent the wheel. Smart developers rely on existing libraries to craft simple","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-buttons-bttncss\/btncss.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-buttons-bttncss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bttn.css – Awesome CSS Buttons Under 4Kb"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9CQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=37004"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37004\/revisions"}],"predecessor-version":[{"id":48310,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37004\/revisions\/48310"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37004"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}