Create Rotating Buttons Using CSS3 and HTML 5 Tools

Manish Singh
May 19, 2012
14.4k
0
0
Article

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

Step 2 : Add a Folder on Desktop.

Right-click on desktop.

new->add folder.

Name of folder is own choice there is "Jeen".

Step 3 : Open Visual Studio.

Go to file -> New->Projects.

Create an ASP. NET Web Application.

Name of "Joy.aspx".

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

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

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>