Create Interactive Round Button Menu Using HTML5

Manish Singh
12y
8.7k
0
0

Article

Introduction

In this article we will learn how to create an interactive round button menu using HTML5 and CSS tools. Now we will also learn how to set an image background in an interactive round button menu page using a CSS. We will begin with a small discussion of HTML. HTML is an acronym for "Hyper Text Markup Language" used to display data in a browser. HTML5 is an advanced version of HTML used to develop multimedia and animated applications. In an article we used a CSS part; CSS is a "Cascading Style Sheet" used for design purposes in applications. I hope this article helps to show how to create interactive round button menus using HTML5 and CSS tools. If you are interested in developing interactive round button menu applications then go through the following steps.

Step 1: Open Visual Studio.

Go to file -> New->Projects.
Crete an ASP. NET Web Application.
Name of "Menu.aspx".

Step 2: Add a HTML file to your web application.

Right-click on the Solution Explorer.
Add->add new item->HTML form.
The Name of the HTML form is "Round.html".

Step 3: In this step we add a CSS file named StyleSheet3.css. In the CSS we set font-family, font-size, position, height, width of interactive round button menu page.

Right-click on the Solution Explorer.
Add-> Add New Item.
Add style sheet.
Set the name of the style sheet is a "StyleSheet3.css".

Code

.ca-icon
{

font-family: 'WebSymbolsRegular';

font-size: 40px;

color: #f6f6f6;

line-height: 60px;

position: absolute;

width: 100%;

height: 60px;

left: 0px;

top: 30px;

text-align: center;

}

.ca-main
{

font-size: 24px;

position: absolute;

top: 110px;

height: 80px;

width: 170px;

left: 50%;

}

Step 4: In this step we add a folder named "image" that is used to store all images. The images are used to set a background of an interactive round button menu page.

Right-click on the Solution Explorer.
Add-> Add New Folder.
Set the name of the folder is a "image".

Step 5: In this section we set a content and color of a body of a interactive round button menu.

Code

<h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus

<span style="background-color: #66FFCC">Using HTML5 & CSS</span></h1>

</div>

<li>

<h3 class="ca-sub">About Us</h3>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Career</h2>

<h3 class="ca-sub">Adverties</h3>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>

<h3 class="ca-sub">Resources</h3>

</div>

</a>

</li>

</ul>

</div>

</body>

Step 6: Now in this section we apply a style on a mouse hover event that performs the functionality when the user clicks on a text button; after that change a text menu presentation.

Code

.ca-menu
{

color: #000;

font-size: 60px;

text-shadow: 0px 0px 1px #000;

}

.ca-menu
{

color: #000;

}

Step 7: In this section we set a demo of a code interactive round button menu application that is given below.

Code

<html>

<head>

<title>Creative CSS3 Animation Menus</title>

</head>

<h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus

<span style="background-color: #66FFCC">Using HTML5 & CSS</span></h1>

</div>

<li>

<h3 class="ca-sub">About Us</h3>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Career</h2>

<h3 class="ca-sub">Adverties</h3>

</div>

</a>

</li>

<li>

<h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>

<h3 class="ca-sub">Resources</h3>

</div>

</a>

</li>

</ul>

</div>

</body>

Step 8: Press Ctrl + F5 to run an application in a browser.

Output

Resources

Here is some useful resources

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all