CSS Link

<!DOCTYPE html>
<html>
<head>
	<title>CSS Link</title>
</head>
<body>

<div class="link">
	<a href="#">Text Link</a>
</div>

<div class="link_2">
	<a href="#">Text Link</a>
</div>

<div class="link_button">
	<a href="#"><button>Link Button</button>
	</a>
</div>

<div class="link_button_2">
	<a href="#"><button>Link Button</button>
	</a>
</div>

<style>
a
{
	float: left;
	margin: 20px 15px;
}

.link
{
	font-size: 30px;
}

.link_2
{
	font-family: sans-serif;
	font-size: 30px;
	color: #000;
}

.link_2 a
{
	text-decoration: none;
}

.link_2 a:visited
{
	color: #000;
}

.link_2 a:hover
{
	color: blue;
}

.link_2 a:active
{
	color: red;
}

.link_button a button
{
	background: none;
	border: solid 2px #000;
	font-size: 30px;
	text-decoration: none;
	cursor: pointer;
}

.link_button a button:hover
{
	background: #e63e32;
}

.link_button_2 a button
{
	width: 200px;
	height: 70px;
	background: red;
	border: none;
	font-family: sans-serif;
	color: #fff;
	font-size: 30px;
	text-decoration: none;
	cursor: pointer;
	display:inline-block;
}	

.link_button_2 a button:hover
{
	color: #000;
	background: #ff9900;
}
</style>
</body>
</html>
ICT With Shantha Bandara

CSS Link

CSS Link

No comments:

Post a Comment
