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.
  • Open start->Notepad.
  • The name of the editor is "Sam".
notepad.gif
    Step 2: Add a Folder on Desktop.
    • Right-click on desktop.
    • new->add folder.
    • The name of the folder is own choice there is "Jeen".
    folder.gif
    Step 3:     Open Visual Studio.
    • Go to file -> New->Projects.
    • Create an ASP. NET Web Application.
    • Name of "Joy.aspx".
    new application.gif
    openapplication.gif
    Step 4:     Add an HTML file to your web application.
    • Right-click of Solution Explorer.
    • Add->add new item->HTML form.
    • Name of HTML form is "Rotate.html".
    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