{"id":1648,"date":"2014-11-09T03:50:38","date_gmt":"2014-11-08T22:20:38","guid":{"rendered":"http:\/\/superdevresources.com\/?p=12"},"modified":"2021-03-17T21:32:48","modified_gmt":"2021-03-17T16:02:48","slug":"super-simple-ghost-button-css","status":"publish","type":"post","link":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/","title":{"rendered":"Super simple Ghost Button CSS"},"content":{"rendered":"\n<p>In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are trending design element&nbsp;while doing minimal&nbsp;&amp; Flat Web design.<\/p>\n\n\n\n<p>While there are multiple ways one can approach making the Ghost button, however, I will keep it super simple and use just CSS to style our ghost button. We will also add simple hover effects to make our Ghost button give visual feedback to user when pressed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"398\" src=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png\" alt=\"simple ghost button css\" class=\"wp-image-8342\" srcset=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png 728w, https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css-300x164.png 300w, https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css-500x273.png 500w, https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css-600x328.png 600w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ghost button CSS<\/h2>\n\n\n\n<p>We will be writing a &#8220;ghost-button<br>&#8221; CSS class (shown below) which when applied, will convert any &lt;a href=&#8221;..&#8221;&gt; tag to a ghost button.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.ghost-button {\n  color: #009688;\n  background: #fff;\n  border: 1px solid #009688;\n  font-size: 17px;\n  padding: 7px 12px;\n  font-weight: normal;\n  margin: 6px 0;\n  margin-right: 12px;\n  display: inline-block;\n  text-decoration: none;\n  font-family: 'Open Sans', sans-serif;\n  min-width: 120px;\n}<\/pre>\n\n\n\n<p>The trick here is to remove the default text-decoration of links, add thin borders and define some padding to make it look like a rectangular button. On hover, we can simply fill the button with color to give visual feedback to the user.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.ghost-button:hover, .ghost-button:active {\n  color:#fff;\n  background:#009688;\n}<\/pre>\n\n\n\n<p>You can see the&nbsp;result in&nbsp; codepen embed below and see the corresponding CSS and HTML files too.<\/p>\n\n\n<p class='codepen'  data-height='320' data-theme-id='0' data-slug-hash='azoLpo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Ghost Button CSS #1\u00a0by Kanishk Kunal on CodePen.<\/p>\n\n\n\n\n<p><\/p>\n\n\n\n<p>If you are using RSS feed reader, or by any chance the embed above doesn&#8217;t appear then please visit the <a href=\"http:\/\/codepen.io\/kanishkkunal\/pen\/azoLpo\/\" target=\"_blank\" rel=\"noopener\">Pen live on CodePen<\/a><\/p>\n\n\n\n<p>I hope that you found this CSS code snippet to make Ghost Button useful. Let me know if you have any comments or have any variations of Ghost button in mind that can be implemented with plain CSS. <\/p>\n\n\n\n<p>We also have the advance demo where we try to create <a href=\"https:\/\/superdevresources.com\/ghost-buttons-background-image\/\">Ghost Buttons on background image<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. &#8230; <a title=\"Super simple Ghost Button CSS\" class=\"read-more\" href=\"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/\" aria-label=\"Read more about Super simple Ghost Button CSS\"><span><\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":8342,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[166,167,169,155],"class_list":["post-1648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-css-buttons","tag-flat-web-design","tag-ghost-buttons","tag-html-css","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Super simple Ghost Button CSS - Super Dev Resources<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Super simple Ghost Button CSS - Super Dev Resources\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Super Dev Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/superdevresources\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kanishkkunal\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-08T22:20:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-17T16:02:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"398\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kanishk Kunal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kanishkkunal\" \/>\n<meta name=\"twitter:site\" content=\"@superdevres42\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kanishk Kunal\" \/>\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:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/\"},\"author\":{\"name\":\"Kanishk Kunal\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\"},\"headline\":\"Super simple Ghost Button CSS\",\"datePublished\":\"2014-11-08T22:20:38+00:00\",\"dateModified\":\"2021-03-17T16:02:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/\"},\"wordCount\":289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/simple-ghost-button-css.png\",\"keywords\":[\"CSS Buttons\",\"Flat Web Design\",\"Ghost Buttons\",\"HTML &amp; CSS\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/\",\"name\":\"Super simple Ghost Button CSS - Super Dev Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/simple-ghost-button-css.png\",\"datePublished\":\"2014-11-08T22:20:38+00:00\",\"dateModified\":\"2021-03-17T16:02:48+00:00\",\"description\":\"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/simple-ghost-button-css.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/11\\\/simple-ghost-button-css.png\",\"width\":728,\"height\":398,\"caption\":\"simple ghost button css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/super-simple-ghost-button-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/category\\\/development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Super simple Ghost Button CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"name\":\"Super Dev Resources\",\"description\":\"Design, Development, Business &amp; Marketing Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/45.32.231.40\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\",\"name\":\"Super Dev Resources\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"width\":512,\"height\":512,\"caption\":\"Super Dev Resources\"},\"image\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/superdevresources\",\"https:\\\/\\\/x.com\\\/superdevres42\",\"https:\\\/\\\/www.pinterest.com\\\/superdevres42\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\",\"name\":\"Kanishk Kunal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"caption\":\"Kanishk Kunal\"},\"description\":\"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal\",\"sameAs\":[\"https:\\\/\\\/kanishkkunal.com\",\"https:\\\/\\\/www.facebook.com\\\/kanishkkunal\",\"https:\\\/\\\/www.instagram.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kanishkkunal\",\"https:\\\/\\\/in.pinterest.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/x.com\\\/kanishkkunal\",\"kanishkkunal\"],\"url\":\"https:\\\/\\\/superdevresources.com\\\/author\\\/kanishk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Super simple Ghost Button CSS - Super Dev Resources","description":"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are","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:\/\/superdevresources.com\/super-simple-ghost-button-css\/","og_locale":"en_US","og_type":"article","og_title":"Super simple Ghost Button CSS - Super Dev Resources","og_description":"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are","og_url":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/","og_site_name":"Super Dev Resources","article_publisher":"https:\/\/www.facebook.com\/superdevresources","article_author":"https:\/\/www.facebook.com\/kanishkkunal","article_published_time":"2014-11-08T22:20:38+00:00","article_modified_time":"2021-03-17T16:02:48+00:00","og_image":[{"width":728,"height":398,"url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","type":"image\/png"}],"author":"Kanishk Kunal","twitter_card":"summary_large_image","twitter_creator":"@kanishkkunal","twitter_site":"@superdevres42","twitter_misc":{"Written by":"Kanishk Kunal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#article","isPartOf":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/"},"author":{"name":"Kanishk Kunal","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d"},"headline":"Super simple Ghost Button CSS","datePublished":"2014-11-08T22:20:38+00:00","dateModified":"2021-03-17T16:02:48+00:00","mainEntityOfPage":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/"},"wordCount":289,"commentCount":0,"publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"image":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","keywords":["CSS Buttons","Flat Web Design","Ghost Buttons","HTML &amp; CSS"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/","url":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/","name":"Super simple Ghost Button CSS - Super Dev Resources","isPartOf":{"@id":"https:\/\/45.32.231.40\/#website"},"primaryImageOfPage":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#primaryimage"},"image":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","datePublished":"2014-11-08T22:20:38+00:00","dateModified":"2021-03-17T16:02:48+00:00","description":"In this tutorial, I will show you how to create a very simple &amp; minimal&nbsp;Ghost Button with CSS. Ghost Buttons are quite popular these days and are","breadcrumb":{"@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/superdevresources.com\/super-simple-ghost-button-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#primaryimage","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","width":728,"height":398,"caption":"simple ghost button css"},{"@type":"BreadcrumbList","@id":"https:\/\/superdevresources.com\/super-simple-ghost-button-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/superdevresources.com\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/superdevresources.com\/category\/development\/"},{"@type":"ListItem","position":3,"name":"Super simple Ghost Button CSS"}]},{"@type":"WebSite","@id":"https:\/\/45.32.231.40\/#website","url":"https:\/\/45.32.231.40\/","name":"Super Dev Resources","description":"Design, Development, Business &amp; Marketing Resources","publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/45.32.231.40\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/45.32.231.40\/#organization","name":"Super Dev Resources","url":"https:\/\/45.32.231.40\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","width":512,"height":512,"caption":"Super Dev Resources"},"image":{"@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/superdevresources","https:\/\/x.com\/superdevres42","https:\/\/www.pinterest.com\/superdevres42\/"]},{"@type":"Person","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d","name":"Kanishk Kunal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","caption":"Kanishk Kunal"},"description":"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal","sameAs":["https:\/\/kanishkkunal.com","https:\/\/www.facebook.com\/kanishkkunal","https:\/\/www.instagram.com\/kanishkkunal\/","https:\/\/www.linkedin.com\/in\/kanishkkunal","https:\/\/in.pinterest.com\/kanishkkunal\/","https:\/\/x.com\/kanishkkunal","kanishkkunal"],"url":"https:\/\/superdevresources.com\/author\/kanishk\/"}]}},"jetpack_featured_media_url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/11\/simple-ghost-button-css.png","jetpack-related-posts":[{"id":82,"url":"https:\/\/superdevresources.com\/ghost-buttons-background-image\/","url_meta":{"origin":1648,"position":0},"title":"Ghost Buttons on background image","author":"Kanishk Kunal","date":"November 18, 2014","format":false,"excerpt":"This is my second post in Ghost Buttons series where we will talk about placing Ghost Buttons over background images. In Flat Web design, Ghost Buttons are generally placed over large background images or a video footage. For example take a look at Nokia Transitions website, which places a ghost\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"ghost buttons background image","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/ghost-buttons-background-image.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/ghost-buttons-background-image.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/ghost-buttons-background-image.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/ghost-buttons-background-image.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1815,"url":"https:\/\/superdevresources.com\/css-button-glow-effect\/","url_meta":{"origin":1648,"position":1},"title":"CSS for Button Glow Effect on Hover","author":"Kanishk Kunal","date":"January 16, 2016","format":false,"excerpt":"There is a new trend in web design these days and that is to have a glowing button effect for call to action (CTA) buttons in an other-wise clean and flat design. In this post, I will create a simple button and apply glow effect with CSS on it when\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"glow button effect css","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/glow-button-effect-css.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/glow-button-effect-css.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/glow-button-effect-css.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/glow-button-effect-css.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":125,"url":"https:\/\/superdevresources.com\/3d-css-button\/","url_meta":{"origin":1648,"position":2},"title":"How to create a 3D CSS Button","author":"Kanishk Kunal","date":"November 27, 2014","format":false,"excerpt":"While I love flat web design, however sometimes little things like 3D CSS buttons when combined with otherwise flat design do look much more appealing to the eye. The idea is to emphasize call to action with a 3D effect on these buttons. Many flat design websites as well as\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"3d css buttons","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/3d-css-buttons.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/3d-css-buttons.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/3d-css-buttons.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/3d-css-buttons.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":25236,"url":"https:\/\/superdevresources.com\/glassmorphism-ui-css\/","url_meta":{"origin":1648,"position":3},"title":"Quick Glassmorphism UI CSS &#8211; Panels and Button","author":"Kanishk Kunal","date":"March 18, 2021","format":false,"excerpt":"In this article, we will try to create Glassmorphism UI in quick and simple way. You will find CSS and HTML for panels and buttons as well as live demo of the UI with frosted glass effects aka Glassmorphism. What is Glassmorphism? Glassmorphism is a design style where UI are\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"glassmorphism ui css","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/03\/glassmorphism-ui-css.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/03\/glassmorphism-ui-css.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/03\/glassmorphism-ui-css.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/03\/glassmorphism-ui-css.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":26556,"url":"https:\/\/superdevresources.com\/css-button-effects-animations\/","url_meta":{"origin":1648,"position":4},"title":"20 Creative CSS Button Hover Effects &#038; Animations","author":"Kanishk Kunal","date":"May 17, 2021","format":false,"excerpt":"While designing a website you may want to incorporate animated hover effects on your buttons to grab user attention. There are many types of hover effects as well as active\/pressed state effects for buttons that you can implement with pure CSS or with a little JavaScript. In this article, we\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"creative button effects","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/05\/creative-button-effects.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":32964,"url":"https:\/\/superdevresources.com\/design-elements-to-add-to-a-website\/","url_meta":{"origin":1648,"position":5},"title":"7 Design Elements to Add to a Website","author":"SDR Team","date":"May 3, 2023","format":false,"excerpt":"Do you want to attract and retain visitors to your website? If yes, the best practice is adding eye-catching elements to your website. For instance, you can create signature and use it as logo, add a bright and attractive CTA button, or include videos. The goal of every web developer\u2026","rel":"","context":"In &quot;Design&quot;","block_context":{"text":"Design","link":"https:\/\/superdevresources.com\/category\/design\/"},"img":{"alt_text":"website design elements","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2023\/05\/website-design-elements.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2023\/05\/website-design-elements.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2023\/05\/website-design-elements.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2023\/05\/website-design-elements.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/1648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/comments?post=1648"}],"version-history":[{"count":2,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/1648\/revisions"}],"predecessor-version":[{"id":25247,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/1648\/revisions\/25247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media\/8342"}],"wp:attachment":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media?parent=1648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/categories?post=1648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/tags?post=1648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}