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.
new.gif
webapplication.gif
Step 2: Add an HTML file to your web application.
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, the width of the interactive round button menu page.
css.gif
css2.gif
Code
  1. .ca-icon
  2. {
  3. font-family: 'WebSymbolsRegular';
  4. font-size: 40px;
  5. color: #f6f6f6;
  6. line-height: 60px;
  7. position: absolute;
  8. width: 100%;
  9. height: 60px;
  10. left: 0px;
  11. top: 30px;
  12. text-align: center;
  13. }
  14. .ca-main
  15. {
  16. font-size: 24px;
  17. position: absolute;
  18. top: 110px;
  19. height: 80px;
  20. width: 170px;
  21. left: 50%;
  22. }
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.
folder.gif
image.gif
image add.gif
Step 5: In this section, we set the content and color of the body of an interactive round button menu.
Code
  1. <body background="image/orange-dots.png">
  2. <h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus
  5. <span style="background-color: #66FFCC">Using HTML5 & CSS</span>
  6. </h1>
  7. <div class="content">
  8. <div class="more"></div>
  9. <ul class="ca-menu" style="background-color: #FF99CC">
  10. <li>
  11. <a href="#" style="background-color: #FFCCFF">
  12. <span class="ca-icon">M</span>
  13. <div class="ca-content">
  14. <h2 class="ca-main" style="background-color: #66CCFF">Home</h2>
  15. <h3 class="ca-sub">About Us</h3>
  16. </div>
  17. </a>
  18. </li>
  19. <li>
  20. <a href="#" style="background-color: #FFCCFF">
  21. <span class="ca-icon">A</span>
  22. <div class="ca-content">
  23. <h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>
  24. <h3 class="ca-sub">Jobs</h3>
  25. </div>
  26. </a>
  27. </li>
  28. <li>
  29. <a href="#" style="background-color: #FFCCFF">
  30. <span class="ca-icon" id="heart">N</span>
  31. <div class="ca-content">
  32. <h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>
  33. <h3 class="ca-sub"></h3>
  34. </div>
  35. </a>
  36. </li>
  37. <li>
  38. <a href="#" style="background-color: #FFCCFF">
  39. <span class="ca-icon">I</span>
  40. <div class="ca-content">
  41. <h2 class="ca-main" style="background-color: #66CCFF">Career</h2>
  42. <h3 class="ca-sub">Adverties</h3>
  43. </div>
  44. </a>
  45. </li>
  46. <li>
  47. <a href="#" style="background-color: #FFCCFF">
  48. <span class="ca-icon">S</span>
  49. <div class="ca-content">
  50. <h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>
  51. <h3 class="ca-sub">Resources</h3>
  52. </div>
  53. </a>
  54. </li>
  55. </ul>
  56. </div>
  57. </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
  1. .ca-menu
  2. {
  3. color: #000;
  4. font-size: 60px;
  5. text-shadow: 0px 0px 1px #000;
  6. }
  7. .ca-menu
  8. {
  9. color: #000;
  10. }
mouse.gif
Step 7: In this section, we set a demo of a code interactive round button menu application that is given below.
Code
  1. <html>
  2. <head>
  3. <title>Creative CSS3 Animation Menus</title>
  4. <link rel="stylesheet" type="text/css" href="StyleSheet3.css" />
  5. </head>
  6. <body background="image/orange-dots.png">
  7. <h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus
  10. <span style="background-color: #66FFCC">Using HTML5 & CSS</span>
  11. </h1>
  12. <div class="content">
  13. <div class="more"></div>
  14. <ul class="ca-menu" style="background-color: #FF99CC">
  15. <li>
  16. <a href="#" style="background-color: #FFCCFF">
  17. <span class="ca-icon">M</span>
  18. <div class="ca-content">
  19. <h2 class="ca-main" style="background-color: #66CCFF">Home</h2>
  20. <h3 class="ca-sub">About Us</h3>
  21. </div>
  22. </a>
  23. </li>
  24. <li>
  25. <a href="#" style="background-color: #FFCCFF">
  26. <span class="ca-icon">A</span>
  27. <div class="ca-content">
  28. <h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>
  29. <h3 class="ca-sub">Jobs</h3>
  30. </div>
  31. </a>
  32. </li>
  33. <li>
  34. <a href="#" style="background-color: #FFCCFF">
  35. <span class="ca-icon" id="heart">N</span>
  36. <div class="ca-content">
  37. <h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>
  38. <h3 class="ca-sub"></h3>
  39. </div>
  40. </a>
  41. </li>
  42. <li>
  43. <a href="#" style="background-color: #FFCCFF">
  44. <span class="ca-icon">I</span>
  45. <div class="ca-content">
  46. <h2 class="ca-main" style="background-color: #66CCFF">Career</h2>
  47. <h3 class="ca-sub">Adverties</h3>
  48. </div>
  49. </a>
  50. </li>
  51. <li>
  52. <a href="#" style="background-color: #FFCCFF">
  53. <span class="ca-icon">S</span>
  54. <div class="ca-content">
  55. <h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>
  56. <h3 class="ca-sub">Resources</h3>
  57. </div>
  58. </a>
  59. </li>
  60. </ul>
  61. </div>
  62. </body>
Step 8: Press Ctrl + F5 to run an application in a browser.
Output
out.gif
out1.gif
out22.gif
out3.gif
Resources
Here are some useful resources