Post
Ask Question

Create Rotating Buttons Using CSS3 and HTML 5 Tools

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  
    39.   
    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


    Similar Articles