Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Create Interactive Round Button Menu Using HTML5
WhatsApp
Manish Singh
5y
14.1k
0
0
100
Article
RoundButtonMenuinHTML5.rar
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 "HyperText 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.
Create an ASP. NET Web Application.
Name of "Menu.aspx".
Step 2: Add an 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, the width of the interactive round button menu page.
Right-click on the Solution Explorer.
Add-> Add New Item.
Add the 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 an "image".
Step 5: In this section, we set the content and color of the body of an 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>
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
>
<
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
Resources
Here are some useful resources
Create an Interactive Flower Using HTML5
Create Slider Carousel Images Using HTML5
Create Various Model Boxes Using HTML5
Options Menu in Android
Create Interactive Round Button Menu Using HTML5
CSS
HTML
HTML5
HTML5 Used to Create Interactive Round Button Menu.
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 986 people
Download Now!
Learn
View all
Membership not found