By Carl Heaton on

For this tutorial I thought we’d create a nice looking button, using some simple css3.

For this tutorial I thought we’d create a nice looking button, using some simple css3.

Here’s the button we will be creating.

web courses bangkok learn web design design button in css & html

The first thing we need is some html, so we create a very simple base html doc. We are only creating the bare bones for the purposes of this tutorial. Create your html5 doctype and char set meta tag, html opening and closing html tags, then your opening and closing head tags. Within your head tags add your opening and closing title tags, and a suitable title. next add your opening and closing body tags. Between these two tags is where we will place all our content to be viewed. Add one <a href="#">My CSS3 Button</a>

Your document should now look something like this:

This is all we need for now for the html. Now onto styling our buttons with the css. Just after your closing head tag add the following code, well look at it first, then i’ll explain:

Ok, lets break down the css. Firstly we add our standard a link styles, nothing special going on here, our font-family, padding for the button, colour of the text. The only slightly unusual css property is the display:inline-block all we’re are doing with this property is telling the browser, “Hey, treat this element as if it were a block element (but inline)…this lets us give it some margin, where as any inline elements normally can’t have any margin. We could have wrappeed the link in a span and styled it, but by using display:inline-block we are saving ourselves from adding extra markup to our html thus keeping it cleaner.

Next for the button gradient. Here, we are setting the background colour (this is for people viewing the page on a non css3 browser). Then we go through the various browsers setting the gradient colours. You can see we specify which type of gradient linear and the start and ending points and colours from(rgb(160, 200, 40)), to(rgb(111, 139, 24)) Here is a great online tool to generate your gradients with, that out puts all the css for you!

Next we add our box shadow, to give our button a bit of depth:

we then round the corners of our button:

and finally we add a text shadow to the text contained in the button:

Check it in your browser and admire your handy work! you could also try giving you a links classes and adding the style on the class, for a more flexible button. Also, try reversing your gradient for the a:hover state, for a nice rollover effect.

web courses bangkok learn web design design button in css & html

web courses bangkok learn html&css css3 button tutorial

web courses bangkok learn html & css css3 button tutorial

web courses bangkok learn html&css css3 button tutorial

Want to learn how to make a css3 button like this?

If you are interested in learning to design css3 button like this then please contact us here



About The Author


He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Do you have ideas you want to grow?

We run design courses and here in Bangkok that will
bring life to your ideas.


20+ courses taught by industry experts trainers. Learn how to create a website from scratch, a full branding guideline or how to master SEO.


Now you can learn online and all our courses with come with fantastic worksheets, video tutorials and you get as much support as you need.


We are a fully accredited school by the Ministry of Education and soon we will offer a full Education Visa allowing you stay in Thailand.