Thursday 10 October 2013

How to make a button look like a Link

<html>
<head>
<title>Button Looks Like a Link</title>

<style type="text/css">
button {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: #4B0082;
cursor: pointer;
text-decoration: underline;
}
</style>

<script src="jquery.js"></script>
<script>
$(document).ready(function() {
alert("JQuery Loaded");
$("#ButtonId").click(function() {
alert("k fine");
});
$("#ButtonId").mouseup(function() {
$(this).css("color","#4B0082");
});
$("#ButtonId").mousedown(function() {
$(this).css("color","red");

});
});
</script>
</head>

<body>
<button id="ButtonId">Button</button></b>
<a href="#">Link</a>
</body>

</html>


No comments:

Post a Comment