ARROW BUTTON

Friday, 19 September 2014

ARROW BUTTON

-------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
---------------------------------------------------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Arrow Button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div {
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 10px;
}
a {
background: #950006;
border: none;
display: inline-block;
height: 28px;
line-height: 28px;
position: relative;
text-decoration: none;
width: 100px
}
a:before{
background: #950006;
border: none;
content: '';
display: block;
height: 20px;
left: 90px;
position: absolute;
top: 4px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
}
a button {
color: #fff;
background: none;
border: none;
font-weight: bold;
position: relative;
width: 120px;
height: 28px;
}
</style>
</head>
<body>
<div>
<a href="#"><button>Button</button></a>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
PADDING BUTTON CHANGE INTO WIDTH AND HEIGHT
----------------------------------------------------------------------------------------------------------------------

PADDING BUTTON CHANGE INTO WIDTH AND HEIGHT

----------------------------------------------------------------------------------------------------------------------
CODE:
----------------------------------------------------------------------------------------------------------------------

<html>

<head>

<style>

#ID0 {

background-color:red;

color:White;

padding:100px;

text-align: center;

text-decoration: none;

display:inline-block;

font-size:50px;

}