{"id":3610,"date":"2015-04-20T12:15:03","date_gmt":"2015-04-20T09:15:03","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3610"},"modified":"2018-01-09T09:15:21","modified_gmt":"2018-01-09T07:15:21","slug":"css-button-style-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/","title":{"rendered":"CSS Button Style Example"},"content":{"rendered":"

In this article, we’re going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common actions like download<\/strong>, upload<\/strong>, log in\/out<\/strong>, submit<\/strong> and so on. A good button design enhances usability.<\/p>\n

Before we explain how to style buttons, keep in mind that buttons are not links. The main purpose of a link is to navigate between pages and
\nviews, whereas buttons allow you to perform an action (such as submit).<\/p>\n

Make sure to follow each step to get the intended results. In the end you will be able to create your own custom styled buttons.
\n 
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Prerequisites <\/h2>\n

Before we start creating and styling buttons please consider downloading Font Awsome<\/a> icon font pack. These icons will be attached to buttons later when we have created the basics.<\/p>\n

After downloading, add the folders css<\/strong> and fonts<\/strong> inside your project folder like this:
\n

\"Folder<\/a>
Folder View after adding the Font Awesome Folders<\/figcaption><\/figure><\/p>\n

Also, create your basic HTML file that looks like this:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Buttons<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\r\n\t<style type=\"text\/css\">\r\n\r\n  \t<\/style>\r\n\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2. Basic Styling<\/h2>\n
In this section, we’re going to create a basic button using html and css.<\/p>\n
2.1 Setting up the HTML<\/h3>\n
There are 3 main ways you can create a button starting from html.<\/p>\n
1. Use the a<\/code> (anchor) tag to create the link and give it a class, which by default if not styled as a button.
\n2. Use the button<\/code> tag that html5 offers and you have a basic styled button with no css at all.
\n3. Use the input<\/code> tag and give it a class of button and a type of submit. That will create a pre-styled button.<\/p>\n
Your code with these three lines would be:<\/p>\n
\r\n\t<!-- HTML SECTION -->\r\n\r\n\t<a class=\"button\" href=\"#\"<Anchor Button<\/a>\r\n\t<button class=\"button\">Button Tag<\/button>\r\n\t<input class=\"button\" type=\"submit\">\t\t\r\n<\/pre>\n
This is what the basic buttons would look like with no css properties applied.
\n
\"HTML<\/a>
HTML – Basic Buttons<\/figcaption><\/figure><\/p>\n
But for the sake of creating a button from scratch, we will only use the first method that is using an anchor tag, but add a div<\/code> tag with a class of btn-wrapper<\/code> because it will be useful as some properties cannot be applied over the anchor tag.<\/p>\n
<div class=\"btn-wrapper\"><a class=\"button\" href=\"#\">Button<\/a><\/div><\/pre>\n
Until now, it looks like just a link, but we will change that with css.<\/p>\n
2.2 Setting up the CSS<\/h3>\n
Lets give this button<\/code> class some initial attributes to get the view of a button:<\/p>\n
border: 0.1em #333336 solid<\/code> – gave the border respectively a width, a color and a style.<\/p>\n
border-radius: 0.2em<\/code> – gave the border a radius of 0.2em (seems normal).<\/p>\n
text-decoration: none<\/code> – given this attribute, the text will not be underlined as the default browser link underline attribute.<\/p>\n
color: black<\/code> – this will give the text a black color, overriding the default blue color set by the browser<\/p>\n
padding: 0.5em 1em<\/code> – gave the text inside the button a padding of 0.5em top and bottom and 1em left and right.<\/p>\n
background-color: #f3f3f3<\/code> – gave the button a light gray background color.<\/p>\n
Lets also place it in a more pleasant position in order to have a better view.<\/p>\n
We do that by giving the btn-wrapper<\/code> class (from the div) margins.<\/p>\n
The CSS code will look like this:<\/p>\n
\r\n\r\n\t.btn-wrapper {\r\n\t\tmargin-top: 5em;\r\n\t\tmargin-left: 5em;\r\n\t}\r\n\r\n\t.button{\r\n\t\tborder: 0.1em #333336 solid;\r\n\t\tborder-radius: 0.2em;\r\n\t\ttext-decoration: none;\r\n\t\tcolor: black;\r\n\t\tpadding: 0.5em 1em;\r\n\t\tbackground-color: #f3f3f3;\r\n\t}\r\n<\/pre>\n
Given these attributes, we have created a basic styled button that looks like this in the browser:
\n
\"Basic<\/a>
Basic Styled Button<\/figcaption><\/figure><\/p>\n
2.3 Button States<\/h3>\n
In addition to the default state, buttons can have two other states: hover<\/code> and active<\/code>, which respectively mean ‘mouse over’ and ‘clicked\/pressed’. Below we will show the button how to act\/change when the cursor is over it and when it is pressed.<\/p>\n
1. Hover State<\/strong><\/p>\n
The hover state can be achieved by adding :hover<\/code> pseudo class like below:<\/p>\n
\r\n.button:hover {\r\n\tbackground-color: #cececc;  \/* added an intense gray color in active state *\/\r\n}\r\n<\/pre>\n
This would be the pressed button view:
\n
\"Hover<\/a>
Hover State of Button<\/figcaption><\/figure><\/p>\n
2. Active State<\/strong><\/p>\n
The active state can be achieved by adding :active<\/code> pseudo class like below:<\/p>\n
\r\n.button:active {\r\n\tbackground-color: #a2b2bc;  \/* added a blue color in active state *\/\r\n}\r\n\r\n<\/pre>\n
This would be the active state (clicked) view of the button:
\n
\"Active<\/a>
Active State of the Button<\/figcaption><\/figure><\/p>\n
Note that when entering attributes about the other states rather than the default, you should only write attributes that are going to change when the button will be pressed, so it is not necessary to write again the padding or border-radius, these attributes will remain as the previous state. <\/p>\n
As you can see, I gave it only the background-color<\/code> attribute because that was what I needed to change, but you can also change the text color or border color when considering these states.<\/p>\n
3. It’s all about design!<\/h2>\n
From now on, we are going to use a custom font that is Lato and font icons we downloaded.
\nLet’s add the necessary links in the head<\/code> section:<\/p>\n
\r\n<!-- ADD CUSTOM FONT LATO -->\r\n<link href='http:\/\/fonts.googleapis.com\/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text\/css'> \r\n\r\n<!-- ADD FONTAWESOME ICONS -->\r\n<link rel="stylesheet" href="css\/font-awesome.min.css">\r\n<\/pre>\n
Also, add the css code to have one font for everything:<\/p>\n
\r\n* {\t\t\t\t\t\t\t\t\t\t\t\/* means apply to everything on the page *\/\r\n\tfont-family: \"Lato\", \"sans-serif\";\t\t\/* added cutsom font lato in css *\/\r\n}\r\n<\/pre>\n
3.1 Start Small<\/h3>\n
You can have a pretty nice button view with color alternation in aspects of background and text.<\/p>\n
One first advice is, you don’t always need border for the default state.<\/p>\n
Have a look at the following attributes:<\/p>\n
\r\n\r\n\t.button{\r\n\t\tborder-radius: 0.5em;\t\t\t\/* increased border-radius *\/\r\n\t\ttext-decoration: none;\r\n\t\tcolor: white;\t\t\t\t\t\/* changed text color to white *\/\r\n\t\tpadding: 1em 3em;  \t\t\t\t\/* increased padding for a larger button *\/\r\n\t\tbackground-color: #329bd8;\t\t\/* changed background color to a nice blue *\/\r\n\t\ttext-transform: uppercase;\t\t\/* made the text uppercase *\/\r\n\t\tfont-weight: bold;\t\t\t\t\/* gave the text a bold look *\/\r\n\t}\r\n\r\n\t.button:hover {\r\n\t\tbackground-color: transparent;  \/* changed the bg-color to transparent *\/\r\n\t\tborder: 0.15em #329bd8 solid;\t\/* set a border to a blue color *\/\r\n\t\tcolor: #329bd8;\t\t\t\t\t\/* set a text color to the same color *\/\r\n\t}\r\n\r\n\t.button:active {\r\n\t\tbackground-color: transparent;  \r\n\t\tborder: 0.15em #5e8ca5 solid;\t\r\n\t\tcolor: #5e8ca5;\t\t\t\t\t\/* minor text color change in a deeper blue *\/\r\n\t}\r\n\r\n<\/pre>\n
This nice button would look this way in its 3 states:
\n
\"Simple<\/a>
Simple Button Design<\/figcaption><\/figure><\/p>\n
3.2 Icons on Buttons<\/h3>\n
Going further into what’s called a good user experience, this time with buttons, we will add an icon next to the text which will indicate what the button is for.<\/p>\n
Icons are very easy to add, just find the one you want from here<\/a> and copy the html code of the icon and paste it before the button text to make it sit right next to the text.<\/p>\n
Look how I’ve added an upload<\/code> icon to the button:<\/p>\n
\r\n<!-- added <\/i> next to the button text-->\r\n
<\/i>Upload<\/a>\r\n<\/pre>\n
You will also need a few lines of css to make this look fine:<\/p>\n
(only the commented lines are new or edited)<\/p>\n
\r\n\t.button{\r\n\t\tborder-radius: 0.5em;\t\t\t\r\n\t\ttext-decoration: none;\r\n\t\tcolor: white;\t\t\t\t\t\r\n\t\tpadding: 1em;  \t\t\t\t\t\/* removed the right and left padding value *\/\t\t\r\n\t\tpadding-right: 3em;\t\t\t\t\/* added only padding-right to align the icon left\t*\/\r\n\t\tbackground-color: #329bd8;\t\t\r\n\t\ttext-transform: uppercase;\t\t\r\n\t\tfont-weight: bold;\t\t\t\t\r\n\t}\r\n\r\n\t.fa-upload {\r\n\t\tpadding-right: 2em;\t\t\t\t\/* added padding-right to space it from the text *\/\r\n\t\tfont-size: 1.2em;\t\t\t\t\/* increased font-size to fit the button *\/\r\n\t}\r\n<\/pre>\n
The button view in the browser:
\n
\"Button<\/a>
Button with Icon Attached<\/figcaption><\/figure><\/p>\n
Icons can be a good point to consider for buttons. These are just some other buttons with icons:<\/p>\n
\"buttons10\"<\/a><\/p>\n
You can change icon fonts attributes just like you do with text.<\/p>\n
3.3 Gradients on Buttons <\/h3>\n
Just like you apply background colors to buttons, you can also apply gradient<\/strong>s on them.<\/p>\n
Gradients make buttons look more like 3D rather than flat like we’ve seen until now.<\/p>\n
Creating gradients yourselves is just time-wasting, so I suggest you generate gradients online in this website<\/a><\/p>\n
Feel free to choose any gradient you like and copy the css. To be coherent with what we’ve started Imma choose a blue gradient.<\/p>\n
Look at the code below:<\/p>\n
\r\n\/* just removed background-color attribute and added the custom css code *\/\r\n\r\n\t.button{\r\n\t\tborder-radius: 0.5em;\t\t\t\r\n\t\ttext-decoration: none;\r\n\t\tcolor: white;\t\t\t\t\t\r\n\t\tpadding: 1em;  \t\t\t\t\t\r\n\t\tpadding-right: 3em;\t\t\t\t\r\n\t\ttext-transform: uppercase;\t\t\r\n\t\tfont-weight: bold;\t\t\r\n\t\ttext-shadow: -1px -1px 0 rgba(0,0,0,0.3); \r\n\t\tcolor: #FFFFFF;\r\n\t\tbackground-color: #49c0f0; background-image: \r\n\t\t-webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));\r\n\t\tbackground-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);\r\n\t\tbackground-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);\r\n\t\tbackground-image: -ms-linear-gradient(top, #49c0f0, #2CAFE3);\r\n\t\tbackground-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);\r\n\t\tbackground-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);\r\n\t\tfilter:progid:DXImageTransform.Microsoft.gradient\r\n               (GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);\r\n\t\t\t}\r\n\r\n\r\n\t.button:hover {\r\n\t\t background-color: #1ab0ec; background-image: \r\n\t\t -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));\r\n\t\t background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);\r\n\t\t background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);\r\n\t\t background-image: -ms-linear-gradient(top, #1ab0ec, #1a92c2);\r\n\t\t background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);\r\n\t\t background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);\r\n\t\t filter:progid:DXImageTransform.Microsoft.gradient\r\n                (GradientType=0,startColorstr=#1ab0ec, endColorstr=#1a92c2);\t\t\t\r\n\t}\r\n\r\n<\/pre>\n
In the code above I did only consider the normal<\/code> and hover<\/code> state of the button.<\/p>\n
It’s up to you to add the active state if you think you need it.<\/p>\n
This is the how the button we’d get:
\n
\"Gradient<\/a>
Gradient Applied on Button<\/figcaption><\/figure><\/p>\n
That’s it on gradients, try more to see how you can get creative on this.<\/p>\n
These are just some of them I made for you.<\/p>\n
\"Gradients<\/a>
Gradients Button Design<\/figcaption><\/figure>\n
3.4 Patterns on Buttons <\/h3>\n
In addition to gradient backgrounds, buttons can have pattern<\/strong> backgrounds.<\/p>\n
You can find a great gallery of css patterns here<\/a>, feel free to use any of them.<\/p>\n
The way we use them is just like gradients, remove any background color we have and paste the css code for the pattern.<\/p>\n
Look at the code below:<\/p>\n
\r\n\t.button{\r\n\t\tborder-radius: 0.5em;\t\t\t\r\n\t\ttext-decoration: none;\r\n\t\tcolor: white;\t\t\t\t\t\r\n\t\tpadding: 1em;  \t\t\t\t\t\r\n\t\tpadding-right: 3em;\t\t\t\t\r\n\t\ttext-transform: uppercase;\t\t\r\n\t\tfont-weight: bold;\t\t\r\n\t\tbackground-color: #6d695c;\r\n\t\tbackground-image:\r\n\t\trepeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),\r\n\t\trepeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),\r\n\t\tlinear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),\r\n\t\tlinear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));\r\n\t\tbackground-size: 70px 120px;\r\n\t}\r\n\r\n\r\n\t.button:hover {\r\n\t\tbackground:\r\n\t\tradial-gradient(black 15%, transparent 16%) 0 0,\r\n\t\tradial-gradient(black 15%, transparent 16%) 8px 8px,\r\n\t\tradial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,\r\n\t\tradial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;\r\n\t\tbackground-color:#282828;\r\n\t\tbackground-size:16px 16px;\t\r\n\t}\r\n<\/pre>\n
In this code I just added pattern backgrounds for the normal and hover state of the button.<\/p>\n
This is how the pattern styled button would look like:<\/p>\n
\"Gradients<\/a>
Gradients on Buttons<\/figcaption><\/figure>\n
You can play around with these and see a lot of good looking buttons you can create.
\nHere are a few I created for you:
\n
\"Getting<\/a>
Getting Creative with Patterns on Buttons<\/figcaption><\/figure><\/p>\n
4. Conclusion<\/h2>\n
To conclude, we can state that there are various ways you can style and fit buttons according to your needs.<\/p>\n
You can add png images instead of icons or images as backgrounds into a button, but after some time practicing you will understand that keeping it simple and nice is a combinations you can achieve by trying either flat or gradient design, which will also make your project less cluttery from images on each button.<\/p>\n
Below you can find some pre-styled and good designed buttons that you can use for your own projects.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Buttons<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this article, we’re going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common actions like download, upload, log in\/out, submit and so on. A good button design enhances usability. Before we explain how to style buttons, keep in mind that buttons are …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-3610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Button Style Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common\" \/>\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-button-style-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Button Style Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-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\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-20T09:15:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-09T07:15:21+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=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 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-button-style-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Button Style Example\",\"datePublished\":\"2015-04-20T09:15:03+00:00\",\"dateModified\":\"2018-01-09T07:15:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/\"},\"wordCount\":1448,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/\",\"name\":\"CSS Button Style Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-04-20T09:15:03+00:00\",\"dateModified\":\"2018-01-09T07:15:21+00:00\",\"description\":\"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-button-style-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-button-style-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 Button Style 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\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Button Style Example - Web Code Geeks - 2026","description":"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common","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-button-style-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Button Style Example - Web Code Geeks - 2026","og_description":"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-04-20T09:15:03+00:00","article_modified_time":"2018-01-09T07:15:21+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":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Button Style Example","datePublished":"2015-04-20T09:15:03+00:00","dateModified":"2018-01-09T07:15:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/"},"wordCount":1448,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/","name":"CSS Button Style Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-04-20T09:15:03+00:00","dateModified":"2018-01-09T07:15:21+00:00","description":"In this article, we're going through CSS Buttons. As we all know, buttons are important elements on pages and we use them to visually beautify common","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-button-style-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-button-style-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-button-style-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 Button Style 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\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3610","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\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=3610"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3610\/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=3610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=3610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=3610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}