{"id":624,"date":"2022-11-09T11:32:10","date_gmt":"2022-11-09T11:32:10","guid":{"rendered":"https:\/\/www.devopstrainer.in\/blog\/?p=624"},"modified":"2022-11-09T11:32:10","modified_gmt":"2022-11-09T11:32:10","slug":"basic-styling-in-buttons-in-css","status":"publish","type":"post","link":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/","title":{"rendered":"Basic Styling in Buttons in CSS?"},"content":{"rendered":"\n<p>\u00a0CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web pages.During the form submission, to view or to get some information, we generally use buttons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png\" alt=\"\" class=\"wp-image-626\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png 800w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons-300x169.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons-768x432.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons-678x381.png 678w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>There are multiple properties available that are used to style the button element. Let&#8217;s discuss them one by one.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background-colo<\/strong>r= \u00a0this property is used for setting the\u00a0background color of the button element.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Syntax<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>element {  \r\n    \/\/ background-color style  \r\n}  <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>border<\/strong>= It is used to set the\u00a0border of the button. It is the shorthand property for\u00a0<strong>border-width, border-color,<\/strong>\u00a0and\u00a0<strong>border-style<\/strong>.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Syntax<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>element {  \r\n    \/\/ border style  \r\n}  <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>border-radius<\/strong>= It is used to make the rounded corners of the button. It sets the border radius of the button.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">syntax<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>element {  \r\n    \/\/ border-radius property  \r\n}  <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>padding<\/strong> =It is used to set the button padding.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">syntax<\/h5>\n\n\n\n<ol class=\"wp-block-list\"><li>element&nbsp;{&nbsp;&nbsp;<\/li><li class=\"\">&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;padding&nbsp;style&nbsp;&nbsp;<\/li><li>}&nbsp;&nbsp;<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">example<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>    \r\n&lt;html>    \r\n    \r\n&lt;head>    \r\n    &lt;title>   \r\n        button background Color   \r\n    &lt;\/title>   \r\n        \r\n    &lt;style>   \r\n    body{  \r\n       text-align: center;  \r\n    }  \r\n        button {  \r\n           color:lightgoldenrodyellow;  \r\n            font-size: 30px;   \r\n        }   \r\n        .b1 {   \r\n            background-color: red;   \r\n        }   \r\n        .b2 {   \r\n            background-color: blue;   \r\n        }   \r\n        .b3 {   \r\n            background-color: violet;   \r\n        }   \r\n    &lt;\/style>   \r\n&lt;\/head>   \r\n    \r\n&lt;body>    \r\n   &lt;h1>The background-color property.&lt;\/h1>  \r\n    &lt;button class=\"b1\">Red color button&lt;\/button>   \r\n    &lt;button class=\"b2\">Blue color button&lt;\/button>   \r\n    &lt;button class=\"b3\">Violet color button&lt;\/button>   \r\n&lt;\/body>    \r\n&lt;\/html>    <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">output<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"231\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-117.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-117.png 748w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-117-300x93.png 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web&#8230; <\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-624","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps<\/title>\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.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps\" \/>\n<meta property=\"og:description\" content=\"\u00a0CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps | SRE | DevSecOps\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T11:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png\" \/>\n<meta name=\"author\" content=\"shivam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shivam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/\"},\"author\":{\"name\":\"shivam\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/0c8259479972d3d18994f88df3dc8d53\"},\"headline\":\"Basic Styling in Buttons in CSS?\",\"datePublished\":\"2022-11-09T11:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/\"},\"wordCount\":155,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/css-buttons.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/\",\"name\":\"Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/css-buttons.png\",\"datePublished\":\"2022-11-09T11:32:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/0c8259479972d3d18994f88df3dc8d53\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/css-buttons.png\",\"contentUrl\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/css-buttons.png\",\"width\":800,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/basic-styling-in-buttons-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic Styling in Buttons in CSS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/\",\"name\":\"DevOps | SRE | DevSecOps\",\"description\":\"Automation means Cost, Quality, Time\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/#\\\/schema\\\/person\\\/0c8259479972d3d18994f88df3dc8d53\",\"name\":\"shivam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g\",\"caption\":\"shivam\"},\"url\":\"https:\\\/\\\/www.devopstrainer.in\\\/blog\\\/author\\\/shivam\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps","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.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/","og_locale":"en_US","og_type":"article","og_title":"Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps","og_description":"\u00a0CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web...","og_url":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/","og_site_name":"DevOps | SRE | DevSecOps","article_published_time":"2022-11-09T11:32:10+00:00","og_image":[{"url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png","type":"","width":"","height":""}],"author":"shivam","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shivam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#article","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/"},"author":{"name":"shivam","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/0c8259479972d3d18994f88df3dc8d53"},"headline":"Basic Styling in Buttons in CSS?","datePublished":"2022-11-09T11:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/"},"wordCount":155,"commentCount":0,"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/","url":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/","name":"Basic Styling in Buttons in CSS? - DevOps | SRE | DevSecOps","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#primaryimage"},"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png","datePublished":"2022-11-09T11:32:10+00:00","author":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/0c8259479972d3d18994f88df3dc8d53"},"breadcrumb":{"@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#primaryimage","url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png","contentUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/11\/css-buttons.png","width":800,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/www.devopstrainer.in\/blog\/basic-styling-in-buttons-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.devopstrainer.in\/blog\/"},{"@type":"ListItem","position":2,"name":"Basic Styling in Buttons in CSS?"}]},{"@type":"WebSite","@id":"https:\/\/www.devopstrainer.in\/blog\/#website","url":"https:\/\/www.devopstrainer.in\/blog\/","name":"DevOps | SRE | DevSecOps","description":"Automation means Cost, Quality, Time","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopstrainer.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/0c8259479972d3d18994f88df3dc8d53","name":"shivam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/be603b13110d1423e9358d9f4b8901acd56c4239bca1b26b0225d217c2a2f1eb?s=96&d=mm&r=g","caption":"shivam"},"url":"https:\/\/www.devopstrainer.in\/blog\/author\/shivam\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":1,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":627,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/624\/revisions\/627"}],"wp:attachment":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}