Pure CSS3 Button With Clean Design

Today we’ll be creating a simple & clean 3D CSS3 button. This button has been created purely in CSS3 & no JavaScript functions or jquery has been used. This CSS3 button uses a CSS class .submit and the active selector for the class selector. The active selector has been used for the 3D effect when the button has been clicked.

Fullscreen Result: http://jsfiddle.net/8qGqv/64/embedded/result/

Live Preview with CSS3 code: http://jsfiddle.net/8qGqv/64/

The markup of the button is really simple, it just makes use of the class .submit

Please note: This only works as intended in browsers that support the respective CSS properties.

The style of the button is defined inside the class .submit and .submit:active

The CSS3 Code

VIEW DEMOLIVE PREVIEW

I hope you enjoy the styles and find them inspiring!

Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Creating Lists in HTML

In HTML you can create lists using the <li> tag. There are two types of lists in HTML, Ordered lists and Unordered lists. In Ordered list, every item is marked with numbers. While in Unordered list, items are marked with bullets.

Unordered Lists

All the items in an Unordered list will be marked with bullets (or certain symbols).  The Unordered list is represented by <ul> tag. Check the example given below to understand how Unordered lists work in HTML.

Unordered list in html
Unordered list – Default Disc Type

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ul> tags.

Type Attribute Of Unordered Lists

In the example given above, You can see that the bullets are disc shaped. The default type of bullets are disc.

However you can make them square or circle according to your wish. To do that, you can use the attribute type for <ul> tag. Check the example given below.

Unordered List – Square and Circle

Ordered Lists

All the items in Ordered lists will be marked with numbers. The Ordered Lists are represented by <ol> tag. Check the example given below to understand how Ordered lists work in HTML.

Ordered List
Ordered List

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ol> tags.

Start Attribute in Ordered List

You can specify the number with which the list should start using the Start attribute. Check the example given below.

Start Attribute
Start Attribute

Type Attribute in Ordered List

You can specify the type of numbering in the list. The types can be numerical, alphabetical (lowercase or uppercase), capital roman, small roman, etc. Check the example given below.

Types Of Ordered List
Types Of Ordered List

In this way you can use the start attribute and the type attribute for ordered lists. You can also use these attributes together in one single list.

For instance, if you want to create a ordered list with uppercase alphabets and starting with symbol E then you can use the code given below:

Using Start and Type Attribute Together
Using Start and Type Attribute Together

You can test all these codes in the Codefap Online HTML Editor. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Everything about Tables In HTML

In this post, I’ll explain the very basics about tables in HTML. You will learn about how to add table border, spacing, padding, colspan, rowspan, etc.

To create a table in HTML you’ll need the following tags – <table>, <tr>, <td>. The <table> tag represents a HTML table. <tr> tag represents a row inside table. <td> tag represents a cell within a row.

Creating A Simple HTML Table

Given below is the code to create a very basic HTML table. This code creates a HTML table with a single row and 2 columns.

The result will be somewhat as shown below. It doesn’t look like a table because there is no table border. So we will add table border in our next step.

HTML Table

Border Attribute

You can add table border using the attribute border. In the code given below, i have added a table border of size 2 pixels. You can set this value according to your wish.

HTML TABLE BORDER

We got the table border but the content in this table is too tightly packed. So lets add some padding to it.

Cell Padding Attribute

The cellpadding attribute in table will basically add some space between the text and the cell border (not the table border). And you can set the amount of space in pixels.

Cell Padding

Now you know whats cellpadding but then what is cellspacing? Lets check it out.

Cell Spacing Attribute

The cellspacing attribute in table will add some space between the cell border and the table border. You can set the amount of space in pixels.

Cell Spacing

Cell Background Color

To add background color to a particular cell, we will use style attribute. Inside the style attribute we will have background property with some value. Check the code given below.

Cell Background Color

This code turns background color of Cell 1 into yellow. You can try and change it to red or any color of your choice. In the same way you can add color to any other cell.

Adding Multiple Rows

You can add multiple rows by using <tr> tag. Previously we had just one pair of <tr> tag, now lets add two pair of <tr> tags. This will create two rows.

Multiple Rows in HTML TABLE

Table Header

Apart from tr and td, there’s one more tag called the th (table header) tag. You can use it to make the text bold or strong. Check the code given below.

HTML TABLE HEADER TAG

We have learned a lot about tables in this post. Now only two things are remaining – rowspan and colspan attribute of cells.

Row Span

The rowspan attribute of table data (td) tag will convert the cell to occupy multiple rows. For example, if rowspan is 2 for a particular cell then that cell will occupy 2 rows.

HTML ROW SPAN 2

Col Span

The colspan attribute of table data (td) tag will convert the cell to occupy multiple columns. For example, if colspan is 2 for a particular cell then that cell will occupy 2 columns.

HTML COL SPAN 2

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.