In HTML you can create Awesome buttons with different tags. Here are some tips and styling tricks to make your buttons looks pretty.
buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<a href="#" id="linkBtn">Link Button</a><br><br>
<div id="divBtn">Div Button</div><br>
<button id="buttonType">Button tag Button</button><br><br>
<input type="submit" value="Submit type button" id="submitType">
</div>
</body>
</html>
buttons.css
/*Link Button Styling*/
#linkBtn {
text-decoration:none;
padding:6px;
background:#00bbaf;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
/*Link Button Styling End*/
/*Div Button Styling*/
#divBtn {
width:200px;
text-align:center;
padding:6px;
background:orange;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
#divBtn:hover {
cursor:pointer;
}
/*Div Button Styling End*/
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:red;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid red;
}
#buttonType:hover{
cursor:pointer;
}
/*Button Type Button Styling End*/
/*Submit Type Button Styling End*/
#submitType {
padding:6px;
background:green;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid green;
}
#submitType:hover{
cursor:pointer;
}
/*Submit Type Button Styling End*/
Buttons look like this
Stay tuned for more tips and tricks.
buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<a href="#" id="linkBtn">Link Button</a><br><br>
<div id="divBtn">Div Button</div><br>
<button id="buttonType">Button tag Button</button><br><br>
<input type="submit" value="Submit type button" id="submitType">
</div>
</body>
</html>
buttons.css
/*Link Button Styling*/
#linkBtn {
text-decoration:none;
padding:6px;
background:#00bbaf;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
/*Link Button Styling End*/
/*Div Button Styling*/
#divBtn {
width:200px;
text-align:center;
padding:6px;
background:orange;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
#divBtn:hover {
cursor:pointer;
}
/*Div Button Styling End*/
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:red;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid red;
}
#buttonType:hover{
cursor:pointer;
}
/*Button Type Button Styling End*/
/*Submit Type Button Styling End*/
#submitType {
padding:6px;
background:green;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid green;
}
#submitType:hover{
cursor:pointer;
}
/*Submit Type Button Styling End*/
Buttons look like this
Stay tuned for more tips and tricks.
No comments:
Post a Comment