Lets create an attractive Button in Html & CSS. Follow this tutorial to design a beautiful button using Css 3 and Html5. Below is a code sample with demo to make awesome button design. Code css 3 transition effect to create most attractive buttons.
1.) Rounded Button
Here is a code for Button that grow wider on Hover .To make it attractive a transition delay have been added to the Hover effect
HTML Code:
Transition Delay of 0.5 sec is added by using the below code
Width of the Button to be grow during mouse hover is specified in the below code
2. ) Spinning Button On Hover:
Now let us create a button which Rotate 360 degree on hover .
HTML Code:
***** Like us in FB & get more updates ...... ****
________________________________________________________________________________________
1.) Rounded Button
<div>CSS Code :
<input type="submit" name="submit" value="Go In To Vote! " id="button1" class="butText"></div>
.butText {
font: 18px/1.5 Helvetica, Arial, sans-serif;
color: #fff;
}
#button1 {
background: #6292c2;
border: 2px solid #eee;
height: 28px;
width: 75px;
margin: 56px 0 0 160px;
padding: 0 0 0 7px;
overflow: hidden;
display: block;
/*Rounded Corners of Button */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#button1:hover {
width: 150px;
}
Transition Delay of 0.5 sec is added by using the below code
-webkit-transition: All 0.5s ease;
Width of the Button to be grow during mouse hover is specified in the below code
width: 150px;Top animated button design with html css code sample and demo. Fresh design plays a major role to attract website visitor. Collection of nice buttons with smart color combination and transition effect on css3.
2. ) Spinning Button On Hover:
Now let us create a button which Rotate 360 degree on hover .
HTML Code:
<body>CSS Code:
<div class="spinning_button">
<a href="" class="button" type="submit" name="submit" value="Submit"></a>
</div>
</body>
.spinning_button a{
width:100px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.button { background-image: url('but.gif'); }
.spinning_button a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.3s ease-out;
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
}
***** Like us in FB & get more updates ...... ****
________________________________________________________________________________________
0 comments:
Post a Comment