Button, Tabs, Table, Ajax calendar Styles
by Avinashullal
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<input type="submit" name="btnLogin" value="Login" width="100" id="btnLogin" class="btn">
<br>
<br>
<ul id="page_box_links">
<li><a href="#" class="active">List User</a>
<div></div>
</li>
<li><a href="#">Add New User</a>
<div></div>
</li>
<li><a class="modusr" href="#">Modify User</a>
<div></div>
</li>
</ul>
<br>
<br>
</div>
</div>
</div>
CSS
html {
height: 100%;
position: relative;
}
body {
background-color: #fff;
height: 100%;
font-family: Segoe UI, Open Sans;
font-size: 14px;
color: #393939;
line-height: 1.5;
padding:20px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Segoe UI Light, Open Sans, sans-serif;
font-weight: 100;
}
/*********Button Style*********/
.btn {
background-color: #62a8d1;
box-shadow: 0px 3px 0px 0px #3689B9;
margin-left: 5px;
padding: 7px 20px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff !important;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
transition: background 0.1s ease-in-out;
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 0;
outline: 0;
min-width: 90px;
margin-top: -3px;
border:0;
}
.btn:active {
box-shadow: 0px 2px 0px 0px #62a8d1;
padding-top: 8px;
margin-bottom: -1px;
color: #fff !important;
}
.btn, .btn:hover, .btn:active {
background-color: #62a8d1;
outline: 0 none !important;
text-decoration: none;
color: #fff !important;
}
/*********Tabs Style*********/
ul#page_box_links {
width: 100%;
text-align: justify;
padding-left: 0;
}
ul#page_box_links li {
float: none;
position: relative;
margin-bottom: 10px;
white-space: nowrap;
display: inline-block;
margin-right: 5px;
}
ul#page_box_links li a {
background-color: #F0F1F4;
border-bottom: 3px #d8d9dc solid;
color: #253340;
display: block;
/* text-transform: uppercase; */
letter-spacing: .7px;
padding: 3px 20px;
text-decoration: none;
}
ul#page_box_links li a.active {
...