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
----------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------
CODE:
----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ID0 {
background-color:red;
color:White;
padding:100px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
#ID1 {
background-color:green;
color:White;
/*GOOGLE POPUP NOT SHOW LESS VALUE
THEREFORE
WE USE WIDTH 408.65 AND WE DON'T USE
GOOGLE POPUP VALUE
*/
width:408.65px;
height:262px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
</style>
</head>
<body>
<button id="ID0">BUTTON</button>
<button id="ID1">BUTTON</button>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment