Sample Programs

Creating CSS Buttons

The code below is the code for the above two css buttons. The first button is created using border-style: inset/outset while the second button is created using different shades for the border.


<HTML>
 <HEAD>
     <TITLE> CSS Buttons </TITLE>
 
	 <style>

	 /** CSS BUTTON 1 STYLE. Using inset and outset for the borders **/
	div#cssButton1 {
		margin-left: 50px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 25px;
		height: 25px;
		width: 110px;
		margin: 20px;
		text-align:center;
	}
	div#cssButton1 a {
		height: 100%;
		width: 100%;
		display: block;
		text-decoration: none;
		border-width: 4px;
	}
	div#cssButton1 a:link {
		color: #000000;
		font-weight: bold;
		background-color: #8080FF;
		border-style: outset;
	}
	div#cssButton1 a:visited {
		color: #000000;
		font-weight: bold;
		background-color: #8080FF;
		border-style: outset;
	}
	div#cssButton1 a:hover {
		font-weight: bold;
		color: #FFFFFF;
		background-color: #00005E;
		border-style: inset;
	}
	div#cssButton1 a:active {
		font-weight: bold;
		color: #FFFFFF;
		background-color: #0000C1;
		border-style: inset;
	}



	/** CSS BUTTON 2 STYLE. Here we are defining the colors for the borders **/
	div#cssButton2 {
		margin-left: 50px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 25px;
		height: 25px;
		width: 110px;
		margin: 20px;
		text-align:center;
	}
	div#cssButton2 a {
		text-decoration: none;
		height: 100%;
		width: 100%;
		display: block;
	}
	div#cssButton2 a:link {
		color: #000000;
		font-weight: bold;
		background-color: #408080;
		border-style: solid;
		border-bottom-color: #333333;
		border-right-color: #555555;
		border-left-color: #A0CFCF;
		border-top-color: #A0CFCF;
	}
	div#cssButton2 a:visited {
		color: #000000;
		font-weight: bold;
		background-color: #50AAAA;
		border-style: solid;
		border-bottom-color: #333333;
		border-right-color: #555555;
		border-left-color: #A0CFCF;
		border-top-color: #A0CFCF;
	}
	div#cssButton2 a:hover {
		font-weight: bold;
		color: #FFFFFF;
		background-color: #316262;
		border-style: solid;
		border-bottom-color: #A0CFCF;
		border-right-color: #A0CFCF;
		border-left-color: #555555; 
		border-top-color:  #333333;
	}
	div#cssButton2 a:active {
		font-weight: bold;
		color: #FFFFFF;
		background-color: #408080;
		border-style: solid;
		border-top-color: #333333;
		border-left-color: #555555;
		border-right-color: #A0CFCF;
		border-bottom-color: #A0CFCF;
	} 



	</style>

 </HEAD>
 <BODY>
	<div id="cssButton1">
		<a href="link1.html">CSS Button1</a>
	</div>

	<div id="cssButton2">
		<a href="link1.html">CSS Button2</a>
	</div>

 </BODY>
</HTML>



blog comments powered by Disqus