.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #a12727;
    border-radius: 8px;
    background: #ff4a4a;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
    background: -moz-linear-gradient(top, #ff4a4a, #992727);
    background: linear-gradient(to bottom, #ff4a4a, #992727);
    text-shadow: #591717 1px 1px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    background: #ff5959;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#b62f2f));
    background: -moz-linear-gradient(top, #ff5959, #b62f2f);
    background: linear-gradient(to bottom, #ff5959, #b62f2f);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #982727;
    background: -webkit-gradient(linear, left top, left bottom, from(#982727), to(#982727));
    background: -moz-linear-gradient(top, #982727, #982727);
    background: linear-gradient(to bottom, #982727, #982727);
}
.button:before{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: -5px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAABblBMVEX////T4+mDoLTU4eeIpLigusafus6KpbipxNCyzdmwytmqxdaTscmOqbrZ5uyVsseuydWUscfS4unY5eqgvM2qxNSfus2TsMizzdmhu8eyzNi/2uWSr8e92OPE1d2OqruatsvT4ealwNCcuMyUsMCjvtCivs+kv8yrxtKyzdusx9OatsyVssihvc+41OCLprmduc271eGUtc2hvc6ZtMK81uGZs8GmwdGjvs+oxNTE1N2mws+PqruNqbqvydV/nLWcuM2MqLmtyNSUrr620N2DpsZ9mrKRrsa509/Pz8+VuNiDo72HqseQsMyducedrr+AnbOrwc2UsMG1z9yVssmjv9Cow9Olwc6bt8uFobaRrLyOr8uesL+81+OqxNLA2+eCn7TG5PG0z9yHo7eWs8i0z9rd3d2uyNauyderyNiPrcWtx9aWs8nA2ua1ztuQrsakv9Cgu86pw9Obt8yavd3///+Ao8SLqcO6urq10NsY7rvnAAAAAXRSTlMAQObYZgAAARZJREFUKJF90MV2hEAURVHi7u7u7i7t7m7QOCFOhwT+PiVkIYOc0a23Z0UQuCZd53le14cJe4PbM2fB4NEc5Xbb7jcbzD1D0zTTtV8oWO7z8W6SfIKR0lb82oR0T365nNI0LVW+uFpNm7CQ2xt1hcAIuU5y63cmtD4Wiyxa7MphgzWhznHcsbEGmusmPEz0+itoVQKBWf/fuV93xI+ge8tmjXq1RtU6lyBMTXozb9Yy3uk2CKeSJD5bEkVJPIfgUcYUlKqqeCh5D4TbtQ8cAGNd9kE4aP/EATDWeAeE0k4DB8BYiyUIyd3sCwoAHtmhJISILMvv1sA7AiEa+3EWi0Ko+sJf9sK+KgQh8e0sIaDPEjRnAvFPvwIskaZHo8DBAAAAAElFTkSuQmCC") no-repeat left center transparent;
    background-size: 100% 100%;
}

.mydatagrid
{
	width: 80%;
	border: solid 2px black;
	min-width: 80%;
    margin-left:auto;
    margin-right:auto;
}
.header
{
	background-color: #6a6a6a;
	font-family: Arial;
	color: White;
	height: 25px;
	text-align: center;
	font-size: 16px;
}

.rows
{
	background-color: #fff;
	font-family: Arial;
	font-size: 14px;
	color: #000;
	min-height: 25px;
	text-align: left;
}
.rows:hover
{
	background-color: #fadd7a;
	color: #000;
}

.mydatagrid
{
	width: 80%;
	border: solid 2px black;
	min-width: 80%;
}
.header
{
	background-color: #6a6a6a;
	font-family: Arial;
	color: White;
	height: 25px;
	text-align: center;
	font-size: 16px;
}

.rows
{
	background-color: #fff;
	font-family: Arial;
	font-size: 14px;
	color: #000;
	min-height: 25px;
	text-align: left;
}
.rows:hover
{
	background-color: #fadd7a;
	color: #000;
}

.mydatagrid a /** FOR THE PAGING ICONS  **/
{
	background-color: Transparent;
	padding: 5px 5px 5px 5px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

.mydatagrid a:hover /** FOR THE PAGING ICONS  HOVER STYLES**/
{
	background-color: #fff;
	color: #000;
}
.mydatagrid span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/
{
	
	padding: 5px 5px 5px 5px;
	background-color: #000;
	color: #fff;
}
.pager
{
	background-color: #fadd7a;
	font-family: Arial;
	color: White;
	height: 30px;
	text-align: left;
}

.mydatagrid td
{
	padding: 5px;
}
.mydatagrid th
{
	padding: 5px;
}








.Grid2 {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}
.Grid2 td {
      padding: 2px;
      border: solid 1px #c1c1c1;
      
}
.Grid2 th  {
      padding : 4px 2px;
      color: #fff;
      background: #363670 url(Image/grid-header.png) repeat-x top;
      border-left: solid 1px #525252;
      font-size: 0.9em; }
.Grid2 .alt {
      background: #fcfcfc url(Image/grid-alt.png) repeat-x top; }
.Grid2 .pgr {background: #363670 url(Image/grid-pgr.png) repeat-x top; }
.Grid2 .pgr table { margin: 3px 0; }
.Grid2 .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  
.Grid2 .pgr a { color: Gray; text-decoration: none; }
.Grid2 .pgr a:hover { color: #000; text-decoration: none; }
- See more at: http://www.dotnetfox.com/articles/gridview-custom-css-style-example-in-Asp-Net-1088.aspx#sthash.NiOK6Z5w.dpuf