This way
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10px;
}
.font-button
{
background-color: #0090CB;
height: 50px;
width: 50px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 25pt;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
I am the founder of this site, and also work as an Independent Consultant.
<br />
I completed my graduation from Mumbai University with Bachelor’s Degree in Computer
Engineering.
<br />
I am active member on the ASP.Net forums with "All Star" level ranking. Click here
to view my profile.
<br />
I also wrote articles on SQLServerCentral and ASPAlliance as a guest columnist.
I started this site to answer all the questions that are most frequently asked on
the asp.net forums.
<br />
I was awarded Most Valuable Professional Award (MVP - ASP.Net/IIS) 2009 - 2013 and
Microsoft Community Contributor (MCC) 2011 by Microsoft.
</div>
<hr />
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".font-button").bind("click", function () {
var size = parseInt($('body').css("font-size"));
if ($(this).hasClass("plus")) {
size = size + 1;
} else {
size = size - 1;
if (size <= 10) {
size = 10;
}
}
$('body').css("font-size", size);
});
});
</script>
</form>
</body>
</html>
Demo
