Introduction

This is a simple application for beginners that shows how to rotate a button using HTML 5 and CSS 3 tools. We know that CSS is the acronym for Cascading Style Sheet that helps to design a form in a web application. CSS has three levels; they are level 1, level 2 and level 3. CSS level 3 is alway used to develop an animated application with the help of HTML 5 tools. CSS 3 provides an advanced module used in web applications that include selectors, box models, 2D, and 3D transformation, animation and user interface.
Step 1: First open an HTML editor such as Notepad.
notepad.gif
Step 2: Add a Folder on Desktop.
folder.gif
Step 3: Open Visual Studio.
new application.gif
openapplication.gif
Step 4: Add an HTML file to your web application.
html.gif
Step 5: Set the properties of a button.
Code
  1. .button
  2. {
  3. border-style: none;
  4. border-color: inherit;
  5. border-width: medium;
  6. background:#008080;
  7. color:Navy;
  8. font-weight:lighter;
  9. font-size:10px;
  10. padding:40px 15px;
  11. cursor:progress;
  12. txt-transition:-Rot-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s
  13. transition-property:width,height,transform,background,font-size,opacity,color;
  14. transition-duration:1s,1s,1s,1s,1s,1s,1s;
  15. transition-property:width, height, txt, background, font-size, opacity, color;
  16. transition-duration:1s,1s,1s,1s,1s,1s,1s;
  17. tran-property:width,height,transform,background,font-size,opacity;
  18. tran-duration:1s,1s,1s,1s,1s,1s;
  19. txt-border-radius:5px;
  20. border-radius:5px;
  21. txt-box-shadow:0 0 2px rgba(0,0,0,0.5);
  22. moz-box-shadow:0 0 2px rgba(0,0,0,0.5);
  23. box-shadow:0 0 2px rgba(0,0,0,0.5);
  24. text-shadow:0 0 5px rgba(255,255,255,0.5);
  25. display:inline-block;
  26. height: 300px;
  27. width: 300px;
  28. }
Step 6: Set the rotation properties of a button.
Code :
  1. .clockwise:hover
  2. {
  3. txt: rotate(360deg);
  4. txt-transform: rotate(360deg);
  5. transform: rotate(360deg);
  6. transform: rotate(360deg);
  7. }
  8. .anticlockwise:hover
  9. {
  10. txt: rotate(-360deg);
  11. txt-transform: rotate(-360deg);
  12. transform: rotate(-360deg);
  13. transform: rotate(-360deg);
  14. }
  15. .orange:hover
  16. {
  17. background:#FFB112;
  18. font-size:50px;
  19. color:Fuchsia;
  20. }
  21. .green:hover
  22. {
  23. background:#FFB112;
  24. font-size:50px;
  25. color:Navy;
  26. }
  27. .red:hover
  28. {
  29. background:#D03603;
  30. font-size:50px;
  31. color:Purple;
  32. }
Step 7: The complete code of the application is a given below:
Code
  1. <html>
  2. <title>Tom application </title>
  3. <style>
  4. span
  5. {
  6. width:350px;
  7. float:left;
  8. margin:100px 0 0 50px;
  9. height: 200px;
  10. .button
  11. {
  12. border-style: none;
  13. border-color: inherit;
  14. border-width: medium;
  15. background:#008080;
  16. color:Navy;
  17. font-weight:lighter;
  18. font-size:10px;
  19. padding:40px 15px;
  20. cursor:progress;
  21. txt-transition:-Rot-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s
  22. transition-property:width,height,transform,background,font-size,opacity,color;
  23. transition-duration:1s,1s,1s,1s,1s,1s,1s;
  24. transition-property:width, height, txt, background, font-size, opacity, color;
  25. transition-duration:1s,1s,1s,1s,1s,1s,1s;
  26. tran-property:width,height,transform,background,font-size,opacity;
  27. tran-duration:1s,1s,1s,1s,1s,1s;
  28. txt-border-radius:5px;
  29. border-radius:5px;
  30. txt-box-shadow:0 0 2px rgba(0,0,0,0.5);
  31. moz-box-shadow:0 0 2px rgba(0,0,0,0.5);
  32. box-shadow:0 0 2px rgba(0,0,0,0.5);
  33. text-shadow:0 0 5px rgba(255,255,255,0.5);
  34. display:inline-block;
  35. height: 300px;
  36. width: 300px;
  37. }
  38. .clockwise:hover
  40. {
  41. txt: rotate(360deg);
  42. txt-transform: rotate(360deg);
  43. transform: rotate(360deg);
  44. transform: rotate(360deg);
  45. }
  46. .anticlockwise:hover
  47. {
  48. txt: rotate(-360deg);
  49. txt-transform: rotate(-360deg);
  50. transform: rotate(-360deg);
  51. transform: rotate(-360deg);
  52. }
  53. .orange:hover
  54. {
  55. background:#FFB112;
  56. font-size:50px;
  57. color:Fuchsia;
  58. }
  59. .green:hover
  60. {
  61. background:#FFB112;
  62. font-size:50px;
  63. color:Navy;
  64. }
  65. .red:hover
  66. {
  67. background:#D03603;
  68. font-size:50px;
  69. color:Purple;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <div>
  75. <span>
  76. <a class=" button anticlockwise green" shape="circle">csharpcorner</a>
  77. </span>
  78. <span>
  79. <a class="button clockwise red" shape="poly">MCN Solutions Home Page</a>
  80. </span>
  81. <span>
  82. <a class="button clockwise orange ">MCN professionals</a>
  83. </span>
  84. </div>
  85. </body>undefined</html>
Step 8: Run application on a browser.
Output
out 1.gif
out1.gif
out 2.gif
out3.gif
Resources