Create a rounded CSS button with transition effect

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

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.

Create a new HTML document.

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

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

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

Select the first one.

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

Do the same for the other row.

Go back to Code View.

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

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

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

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

Press F12 if you are a Dreamweaver user.