{"id":19168,"date":"2017-11-24T16:15:38","date_gmt":"2017-11-24T14:15:38","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19168"},"modified":"2018-01-08T14:10:52","modified_gmt":"2018-01-08T12:10:52","slug":"css-input-type-submit-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/","title":{"rendered":"CSS Input Type Submit Example"},"content":{"rendered":"<h2>1. Introduction<\/h2>\n<p>When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy for the end user to navigate your website and send information back to you, while maintaining a beautiful visual experience at the same time. CSS plays an important role in website UI design.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<br \/>\n&nbsp;<br \/>\nThe HTML form is a vital interface between the user and your website in collecting user information. While it is easy to create a generic form in simple HTML, it looks really plain and boring if not styled. Luckily, the look and feel of each visual element of the form, can be modified to suit your preference or according to the overall theme of the website.<\/p>\n<p>Let&#8217;s look into the details of styling the\u00a0<code>input<\/code> fields of an HTML form, specifically, the <code>submit<\/code> field.<\/p>\n<h2>2. Types of form input fields<\/h2>\n<p>Before we go into how we can style them, let&#8217;s take a quick look at the list of all available standard HTML form <code>input<\/code> fields. Note that these can be set by using the <code>type<\/code> attribute of the <code>input<\/code> tag:<\/p>\n<ul>\n<li><code>text<\/code><\/li>\n<li><code>password<\/code><\/li>\n<li><code>radio<\/code><\/li>\n<li><code>checkbox<\/code><\/li>\n<li><code>button<\/code><\/li>\n<li><code>reset<\/code><\/li>\n<li><code>submit<\/code><\/li>\n<\/ul>\n<p>HTML5 introduced the following <em>additional<\/em> input types:<\/p>\n<ul>\n<li><code>color<\/code><\/li>\n<li><code>date<\/code><\/li>\n<li><code>datetime-local<\/code><\/li>\n<li><code>email<\/code><\/li>\n<li><code>month<\/code><\/li>\n<li><code>number<\/code><\/li>\n<li><code>range<\/code><\/li>\n<li><code>search<\/code><\/li>\n<li><code>tel<\/code><\/li>\n<li><code>time<\/code><\/li>\n<li><code>url<\/code><\/li>\n<li><code>week<\/code><\/li>\n<\/ul>\n<p>Now that we know what input fields are available to us, let&#8217;s look at how we can apply styles on them.<\/p>\n<h2>3. Style a form input field using CSS<\/h2>\n<p>As the name suggests, the CSS <code>input<\/code> selector can be used to define the style for your form <code>input<\/code> fields. Let&#8217;s start by creating a simple form. Create an HTML file and name it <code>form.html<\/code>. Copy and paste the below contents into it:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>form.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;CSS Input Type Submit Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;form name=\"form_user_details\"&gt;\r\n    Full name:&lt;br \/&gt;\r\n    &lt;input type=\"text\" name=\"user_name\" \/&gt;&lt;br \/&gt;&lt;br \/&gt;\r\n    Email:&lt;br \/&gt;\r\n    &lt;input type=\"email\" name=\"user_email\" \/&gt;&lt;br \/&gt;&lt;br \/&gt;\r\n    &lt;input type=\"reset\" value=\"Reset\" \/&gt;\r\n    &lt;input type=\"submit\" value=\"Submit\" \/&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Notice that there is no stylesheet associated with the HTML page yet. Save the file and open it in your web browser. Here&#8217;s how it should be looking like:<\/p>\n<figure id=\"attachment_19236\" aria-describedby=\"caption-attachment-19236\" style=\"width: 302px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_simple_wcg_wm.jpg\"><img decoding=\"async\" class=\"wp-image-19236 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_simple_wcg_wm.jpg\" alt=\"Fig. 1: Simple HTML form with input fields\" width=\"302\" height=\"391\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_simple_wcg_wm.jpg 302w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_simple_wcg_wm-232x300.jpg 232w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/a><figcaption id=\"caption-attachment-19236\" class=\"wp-caption-text\">Fig. 1: Simple HTML form with input fields<\/figcaption><\/figure>\n<p>Let&#8217;s go ahead and create a new stylesheet. Create a new file, name it <code>style.css<\/code> and place it in the same directory as <code>form.html<\/code>. Paste the below code into it:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>style.css<\/em><\/span><\/p>\n<pre class=\"brush:css\">input {\r\n    height: 30px;\r\n    width: 100px;\r\n}\r\n<\/pre>\n<p>Now, let&#8217;s attach the stylesheet to the HTML page we created earlier. Open <code>form.html<\/code> and paste the below line of code, just after the closing <code>&lt;\/title&gt;<\/code> tag. The full code in your <code>form.html<\/code> file should look like below. Notice the newly added stylesheet line:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>form.html<\/em><\/span><\/p>\n<pre class=\"brush:html; highlight:[6]\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;CSS Input Type Submit Example&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\".\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;form name=\"form_user_details\"&gt;\r\n    Full name:&lt;br \/&gt;\r\n    &lt;input type=\"text\" name=\"user_name\" \/&gt;&lt;br \/&gt;&lt;br \/&gt;\r\n    Email:&lt;br \/&gt;\r\n    &lt;input type=\"email\" name=\"user_email\" \/&gt;&lt;br \/&gt;&lt;br \/&gt;\r\n    &lt;input type=\"reset\" value=\"Reset\" \/&gt;\r\n    &lt;input type=\"submit\" value=\"Submit\" \/&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>In the above example, we specified the <code>height<\/code>\u00a0and <code>width<\/code> properties within the stylesheet. However, what we <em>didn&#8217;t<\/em> specify is <em>which<\/em>\u00a0<code>input<\/code> field should be modified with the given values. Hence, in this case, the <code>height<\/code> and <code>width<\/code> of <em>all<\/em> form <code>input<\/code> fields will be modified.<\/p>\n<p>Here is how our page should look like in a web browser now, with the modified styles:<\/p>\n<figure id=\"attachment_19235\" aria-describedby=\"caption-attachment-19235\" style=\"width: 303px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_wcg_wm.jpg\"><img decoding=\"async\" class=\"wp-image-19235 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_wcg_wm.jpg\" alt=\"Fig. 2: CSS styled input fields\" width=\"303\" height=\"441\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_wcg_wm.jpg 303w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_wcg_wm-206x300.jpg 206w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/a><figcaption id=\"caption-attachment-19235\" class=\"wp-caption-text\">Fig. 2: CSS styled input fields<\/figcaption><\/figure>\n<p>But what if we want to style only a specific field? Let&#8217;s see how, with an example of styling the <code>submit<\/code> field.<\/p>\n<h2>4. Style the submit input field<\/h2>\n<p>Recall that the <code>submit<\/code> field is a sub type of the form <code>input<\/code> field. To be specific, it is an <em>attribute<\/em> of the form <code>input<\/code> tag itself.\u00a0Hence, to style the same, we need to make use of <em>attribute selectors <\/em>in Cascading Style-Sheets.<\/p>\n<p>Open the stylesheet file <code>style.css<\/code>, which we had previously created, and append the below highlighted code to modify the style for the <code>submit<\/code> field. Your stylesheet should look like this:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>style.css<\/em><\/span><\/p>\n<pre class=\"brush:css; highlight:[6,7,8,9]\">input {\r\n    height: 30px;\r\n    width: 100px;\r\n}\r\n\r\ninput[type=submit] {\r\n    background-color: #006699;\r\n    text-decoration: none;\r\n}\r\n<\/pre>\n<p>Save the file and open\/reload the previously created <code>form.html<\/code> in your web browser. Use <code>Ctrl<\/code>+<code>F5<\/code>, to clear the browser cache and reload the page, in case the modified styles don&#8217;t reflect on the page. It should now look something like this:<\/p>\n<figure id=\"attachment_19233\" aria-describedby=\"caption-attachment-19233\" style=\"width: 302px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_black_wcg_wm.jpg\"><img decoding=\"async\" class=\"wp-image-19233 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_black_wcg_wm.jpg\" alt=\"Fig. 3: CSS styled submit field\" width=\"302\" height=\"451\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_black_wcg_wm.jpg 302w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_black_wcg_wm-201x300.jpg 201w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/a><figcaption id=\"caption-attachment-19233\" class=\"wp-caption-text\">Fig. 3: CSS styled submit field<\/figcaption><\/figure>\n<p>As you can see, the <code>submit<\/code> field text is barely visible. This can be easily fixed by modifying the text color with the <code>color<\/code> property. Here&#8217;s the modified code:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>style.css<\/em><\/span><\/p>\n<pre class=\"brush:css; highlight:[8]\">input {\r\n    height: 30px;\r\n    width: 100px;\r\n}\r\n\r\ninput[type=submit] {\r\n    background-color: #006699;\r\n    color: #FFFFFF;\r\n    text-decoration: none;\r\n}<\/pre>\n<p>Save the <code>style.css<\/code> file and open\/reload <code>form.html<\/code> again in your web browser. Here&#8217;s what the <code>submit<\/code> field should be looking like now:<\/p>\n<figure id=\"attachment_19234\" aria-describedby=\"caption-attachment-19234\" style=\"width: 302px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_white_wcg_wm.jpg\"><img decoding=\"async\" class=\"wp-image-19234 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_white_wcg_wm.jpg\" alt=\"Fig. 4: CSS styled submit field with modified text color\" width=\"302\" height=\"450\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_white_wcg_wm.jpg 302w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/form_css_input_submit_white_wcg_wm-201x300.jpg 201w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/a><figcaption id=\"caption-attachment-19234\" class=\"wp-caption-text\">Fig. 4: CSS styled submit field with modified text color<\/figcaption><\/figure>\n<p>We have managed to transform our plain and boring <code>submit<\/code> field into a more visually appealing version. Remember that you can play around with the CSS properties and adapt the style to suit your preferences as much as you want!<\/p>\n<h2>5. Download the Source Code<\/h2>\n<p>This was an example on styling the <code>submit<\/code> field of an HTML form.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/CSSInputTypeSubmitExample.zip\"><strong>CSSInputTypeSubmitExample.zip<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy for the end user to navigate your website and send information back to you, while maintaining a beautiful visual experience at the same time. CSS &hellip;<\/p>\n","protected":false},"author":1661,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[236,114,138,498],"class_list":["post-19168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-css3","tag-input","tag-submit"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Input Type Submit Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy\" \/>\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.webcodegeeks.com\/css\/css-input-type-submit-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Input Type Submit Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/JensonJoseOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-24T14:15:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:10:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jenson Jose\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseJenson\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jenson Jose\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\"},\"author\":{\"name\":\"Jenson Jose\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e\"},\"headline\":\"CSS Input Type Submit Example\",\"datePublished\":\"2017-11-24T14:15:38+00:00\",\"dateModified\":\"2018-01-08T12:10:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\"},\"wordCount\":758,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"keywords\":[\"CSS\",\"css3\",\"input\",\"submit\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\",\"name\":\"CSS Input Type Submit Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2017-11-24T14:15:38+00:00\",\"dateModified\":\"2018-01-08T12:10:52+00:00\",\"description\":\"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Input Type Submit Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e\",\"name\":\"Jenson Jose\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g\",\"caption\":\"Jenson Jose\"},\"description\":\"Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.\",\"sameAs\":[\"https:\/\/www.jensonjose.com\",\"https:\/\/www.facebook.com\/JensonJoseOnline\/\",\"https:\/\/x.com\/JoseJenson\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jenson-jose\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Input Type Submit Example - Web Code Geeks - 2026","description":"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy","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.webcodegeeks.com\/css\/css-input-type-submit-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Input Type Submit Example - Web Code Geeks - 2026","og_description":"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/JensonJoseOnline\/","article_published_time":"2017-11-24T14:15:38+00:00","article_modified_time":"2018-01-08T12:10:52+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Jenson Jose","twitter_card":"summary_large_image","twitter_creator":"@JoseJenson","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jenson Jose","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/"},"author":{"name":"Jenson Jose","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e"},"headline":"CSS Input Type Submit Example","datePublished":"2017-11-24T14:15:38+00:00","dateModified":"2018-01-08T12:10:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/"},"wordCount":758,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","keywords":["CSS","css3","input","submit"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/","name":"CSS Input Type Submit Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2017-11-24T14:15:38+00:00","dateModified":"2018-01-08T12:10:52+00:00","description":"1. Introduction When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-submit-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Input Type Submit Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e","name":"Jenson Jose","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g","caption":"Jenson Jose"},"description":"Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.","sameAs":["https:\/\/www.jensonjose.com","https:\/\/www.facebook.com\/JensonJoseOnline\/","https:\/\/x.com\/JoseJenson"],"url":"https:\/\/www.webcodegeeks.com\/author\/jenson-jose\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/1661"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19168"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}