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".
![new.gif]()
![webapplication.gif]()
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".
![css.gif]()
![html.gif]()
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".
![css.gif]()
![css2.gif]()
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".
![folder.gif]()
![image.gif]()
![image add.gif]()
Step 5: In this section we set a content and color of a body of a interactive round button menu.
Code
<body background="image/orange-dots.png">
<h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus
<span style="background-color: #66FFCC">Using HTML5 & CSS</span></h1>
<div class="content">
<div class="more">
</div>
<ul class="ca-menu" style="background-color: #FF99CC">
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Home</h2>
<h3 class="ca-sub">About Us</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>
<h3 class="ca-sub">Jobs</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon" id="heart">N</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>
<h3 class="ca-sub"></h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Career</h2>
<h3 class="ca-sub">Adverties</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>
<h3 class="ca-sub">Resources</h3>
</div>
</a>
</li>
</ul>
</div>
</body>
![body.gif]()
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;
}
![mouse.gif]()
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>
<link rel="stylesheet" type="text/css" href="StyleSheet3.css" />
</head>
<body background="image/orange-dots.png">
<h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus
<span style="background-color: #66FFCC">Using HTML5 & CSS</span></h1>
<div class="content">
<div class="more">
</div>
<ul class="ca-menu" style="background-color: #FF99CC">
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Home</h2>
<h3 class="ca-sub">About Us</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>
<h3 class="ca-sub">Jobs</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon" id="heart">N</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>
<h3 class="ca-sub"></h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main" style="background-color: #66CCFF">Career</h2>
<h3 class="ca-sub">Adverties</h3>
</div>
</a>
</li>
<li>
<a href="#" style="background-color: #FFCCFF">
<span class="ca-icon">S</span>
<div class="ca-content">
<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
![out.gif]()
![out1.gif]()
![out22.gif]()
![out3.gif]()
Resources
Here is some useful resources