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 help 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 includes selectors, box model, 2D and 3D transformation, animation and user interface. 

Step 1 :  First open a HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of editor is "Sam".
notepad.gif

Step 2 : Add a Folder on Desktop.

  • Right-click on desktop.
  • new->add folder.
  • Name of 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 a 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

.button
 
{
            border-style: none;
            border-color: inherit;
            border-width: medium;
            background:#008080;
            color:Navy;
            font-weight:lighter;
            font-size:10px;
            padding:40px 15px;
            cursor:progress;
            txt-transition:-Rot-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s
 
           transition-property:width,height,transform,background,font-size,opacity,color;
            transition-duration:1s,1s,1s,1s,1s,1s,1s;
            transition-property:width, height, txt, background, font-size, opacity, color;
            transition-duration:1s,1s,1s,1s,1s,1s,1s;
            tran-property:width,height,transform,background,font-size,opacity;
            tran-duration:1s,1s,1s,1s,1s,1s;
            txt-border-radius:5px;
            border-radius:5px;
            txt-box-shadow:0 0 2px rgba(0,0,0,0.5);
            moz-box-shadow:0 0 2px rgba(0,0,0,0.5);
            box-shadow:0 0 2px rgba(0,0,0,0.5);
            text-shadow:0 0 5px rgba(255,255,255,0.5);
            display:inline-block;
            height: 300px;
            width: 300px;
     }

Step 6:  Set the rotation properties of a button.

Code :

.clockwise:hover

{
       txt: rotate(360deg);
       txt-transform: rotate(360deg);
       transform: rotate(360deg);
       transform: rotate(360deg);
}
.anticlockwise:hover
{
       txt: rotate(-360deg);
       txt-transform: rotate(-360deg);
       transform: rotate(-360deg);
       transform: rotate(-360deg);
}
.orange:hover
{
       background:#FFB112;
       font-size:50px;
       color:Fuchsia;
}
.green:hover
{
       background:#FFB112;
       font-size:50px;
       color:Navy;
}
.red:hover
{
       background:#D03603;
       font-size:50px;
       color:Purple;
}

Step 7 :  The complete code of application is a given below:

Code

<html>
<title>Tom application </title>
<style>
    span
{
       width:350px;
       float:left;
       margin:100px 0 0 50px;
        height: 200px;
.button
{
           border-style: none;
           border-color: inherit;
           border-width: medium;
           background:#008080;
           color:Navy;
           font-weight:lighter;
           font-size:10px;
           padding:40px 15px;
           cursor:progress;
           txt-transition:-Rot-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s
           transition-property:width,height,transform,background,font-size,opacity,color;
           transition-duration:1s,1s,1s,1s,1s,1s,1s;
           transition-property:width, height, txt, background, font-size, opacity, color;
           transition-duration:1s,1s,1s,1s,1s,1s,1s;
           tran-property:width,height,transform,background,font-size,opacity;
           tran-duration:1s,1s,1s,1s,1s,1s;
           txt-border-radius:5px;
           border-radius:5px;
           txt-box-shadow:0 0 2px rgba(0,0,0,0.5);
           moz-box-shadow:0 0 2px rgba(0,0,0,0.5);
           box-shadow:0 0 2px rgba(0,0,0,0.5);
           text-shadow:0 0 5px rgba(255,255,255,0.5);
           display:inline-block;
           height: 300px;
           width: 300px;
    }
.clockwise:hover

{
       txt: rotate(360deg);
       txt-transform: rotate(360deg);
       transform: rotate(360deg);
       transform: rotate(360deg);
}
.anticlockwise:hover
{
       txt: rotate(-360deg);
       txt-transform: rotate(-360deg);
       transform: rotate(-360deg);
       transform: rotate(-360deg);
}
.orange:hover
{
       background:#FFB112;
       font-size:50px;
       color:Fuchsia;
}
.green:hover
{
       background:#FFB112;
       font-size:50px;
       color:Navy;
}
.red:hover
{
       background:#D03603;
       font-size:50px;
       color:Purple;
}
</style>
</head>
<body>
<div>
 
<span>
   <a class=" button anticlockwise green" shape="circle">csharpcorner</a>
     </span>
     <span>
    <a class="button clockwise red" shape="poly">MCN Solutions Home Page</a>
    </span>
     <span>
     <a class="button  clockwise  orange ">MCN professionals</a>
    </span>

</
div>

</body>
</
html>

Step 8: Run application on a browser.

Output

out 1.gif

 out1.gif

 out 2.gif

 out3.gif

Resources

Up Next
    Ebook Download
    View all
    Learn
    View all