Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Create a rounded CSS button with transition effect
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Create a rounded CSS button with transition effect

CSS is a mighty powerful language for shaping your web objects. You will learn to create a two versions of a web button, one with and other without a transition.

 
  Author: mat | Version: CS3 | 23rd May 2013 |  
 
 
1.
 

Create a new HTML document.

 
 
2.
 

If you are using Adobe Dreamweaver then active the Code view (see picture).

 
 
3.
 

Go somewhere between  <head> and </head> tags.

 
 
4.
 

Write or rather copy/paste the following code:

<style>
a.css-button {
font-size:30px;
color:#000;
text-decoration:none;
display:block;
width:350px;
padding:5px;
border:1px solid #DDD;
text-align:center;

-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

background:#FFFFFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEE));
background:-moz-linear-gradient(0% 90% 90deg, #EEE, #FFF);

-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
a.css-button:hover {
color:#fff;
border-color:#3278BE;

background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4195DD), to(#003C82));
background:-moz-linear-gradient(0% 90% 90deg, #003C82, #4195DD);
}
a.css-button:active {
background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
}

a.css-button.notransitions {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
</style>

 
 
5.
 

If you are a Dreamweaver user, activate the Design View.

If you are not a Dreamweaver user than simply add these two links inside the <body> tags of your html document:

<p><a href="http://www.dreevoo.com/category.php?id=120">Dreevoo.com  transition</a></p>
<p><a href="http://www.dreevoo.com/category.php?id=119">Dreevoo.com no transition</a></p>


... and go straight to step 10 of the tutorial.

 
 
6.
 

Enter two words or word combinations, each in a separate row.

 
 
7.
 

Select the first one.

 
 
8.
 

Into the Link field enter an url you want the button to point to (see picture).

 
 
9.
 

Do the same for the other row.

Go back to Code View.

 
 
10.
 

Go inside <body> tags where the links have been created (se picture).

 
 
11.
 

Add  class="css-button" (see picture).

 
 
12.
 

And to the second link ass class="css-button notransitions" (see picture).

 
 
13.
 

Save your document and check out how it looks like in your browser.

Press F12 if you are a Dreamweaver user.

 
 
14.
 

If you run your mouse/pointer over the first button, a short transition should occur before the color kicks in.

The second one should turn instantly blue.

Check out my rounded CSS buttons in action.

Now play with the code and its attributes and see what happens. If you need some help or pointers, you are more than welcome to use the forum or comments bellow.

 
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO