Round Corner gradient buttons without images

I had a need to create rounded button with gradient effect in sharepoint webpart.

On Search I first found I can get rouded corners using jquer.corner.js

then I used css to give gradient effect. below is code to add two button one is gray and other is blue

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 1</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://malsup.github.com/jquery.corner.js”></script><style type=”text/css”>
div.demo { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af; }
.button {
padding: 5px 10px;
background: #365BAB;
font-family:”Times New Roman”, Times, serif;
color: #ffffff;
text-align: center;
width:120px;
height:25px;
margin: 1em;
cursor: pointer
}
.submitevent {
padding: 5px 10px;
background: #D5D7D6;
font-family:”Times New Roman”, Times, serif;
color: black;
text-align: center;
width:120px;
height:25px;
margin: 1em;
cursor: pointer
}
.button {
background: -webkit-gradient(linear, left top, left bottom, from(#365BAB), to(#6C97D0));
background: -moz-linear-gradient(top, #0a8ffe, #2b5cc6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#365BAB’, endColorstr=’#6C97D0′)
}

.submitevent {
background: -webkit-gradient(linear, left top, left bottom, from(#D5D7D6), to(#E5E6E6));
background: -moz-linear-gradient(top, #0a8ffe, #2b5cc6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#D5D7D6′, endColorstr=’#E5E6E6′)
}

</style>
<script type=”text/javascript”>
$(function(){

$(‘.button’).corner();
$(‘.submitevent’).corner();
});
</script>
</head>

<body>
<div class=”submitevent”>Submit an Event</div>
<div class=”button”>More Events</div>
</html>

Advertisements