"Custom Button Profile _Top Pri"
Bootstrap 3.3.0 Snippet by Nemra1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" align="right"> <div class="row" align="right"> <div class="col-lg-5 col-md-5 col-sm-10 col-xs-20> <div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item active text-center"> <h4 class="glyphicon glyphicon-plus"></h4><br/>Add Employee </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-heart"></h4><br/>My Fav </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-camera"></h4><br/>Camera </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-cutlery"></h4><br/>Restaurant </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-user"></h4><br/>Employees </a> </div> </div> <div class="col-xs-4 col-md-8 bhoechie-tab"> <div class="bhoechie-tab-content active"> <center> <form role="form" class="form-inline go-right" style="color: Green;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;"> <h2>Profile</h2> <p>Please update your profile for more security.</p> <div class="form-group"> <input id="Firstname" name="Firstname" type="text" class="form-control" required> <label for="Firstname">First Name <span class="glyphicon glyphicon-user"> </span></label> </div> <div class="form-group"> <input id="Lastname" name="Lastname" type="text" class="form-control" required> <label for="Lastname">Last Name <span class="glyphicon glyphicon-user"> </label> </div> <div class="form-group"> <input id="Middlename" name="Middlename" type="text" class="form-control" placeholder="Middle Name"> <label for="Middlename">Middle Name <span class="glyphicon glyphicon-user"> </label> </div> <br> <br> <div class="form-group"> <input id="phone" name="phone" type="tel" class="form-control" required> <label for="fphone">Primary Phone <span class="glyphicon glyphicon-phone"></label> </div> <div class="form-group"> <input id="password" name="phone" type="tel" class="form-control" placeholder="secondary phone"> <label for="sphone">Secondary Phone <span class="glyphicon glyphicon-phone"></label> </div> <br><br> <div class="form-group"> <select class="form-control"> <option id="Male" Value="M" style="color:red" selected>Male</option> <option id="FeMale" Value="FM" style="color:green">Female</option> <option id="NotInterested" Value="NI" style="color:blue">Not interested</option> </select> </div> <div class="form-group"> <input id="date" name="date" type="date" class="form-control"> <label for="date">DOB<span class="glyphicon glyphicon-calendar"></label> </div> <br><br> <div class="form-group"> <textarea id="message" name="phone" class="form-control" style="width:400px;height:100px" placeholder="Short Description" ></textarea> <label for="message">Short Description <span class="glyphicon glyphicon-align-justify"></label> </div> <br><br> <div class="form-group"> <input id="Email1" name="phone" class="form-control" style="width:400px;" placeholder="Registered email" ></textarea> <label for="Email1">Registered email <span class="glyphicon glyphicon-align-envelope"></label> </div> <br><br> <div class="form-group"> <input id="Email2" name="phone" class="form-control" style="width:400px;" placeholder="Alternate email" ></textarea> <label for="Email2">Alternate email <span class="glyphicon glyphicon-align-envelope"></label> </div> <br><br> <div class="form-group"> <input id="Vweb" name="phone" class="form-control" style="width:400px;" placeholder="Website" ></textarea> <label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label> </div> <br> <br> <p1>Address</p1> <br> <div class="form-group"> <input id="Address" name="Address" type="tel" class="form-control" required> <label for="Address">Flat NO/House No</label> </div> <div class="form-group"> <input id="LandMark" name="LandMark" type="text" class="form-control" placeHolder="Land Mark"> <label for="LandMark">Land Mark</label> </div> <br><br> <p3>(Enter Pincode/Area to pick your nearest location)<span class="glyphicon glyphicon-map-marker"></p3> <br><br> <div class="form-group" style="width: 600px" > <input input id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" > <label for="LocationPicker">Location Picker</label> </div> <br><br> <div class="form-group"> <input id="route" name="route" type="tel" class="form-control" required disabled="true"> <label for="route">Route/Locality</label> </div> <div class="form-group"> <input id="locality" name="locality" type="tel" class="form-control" required disabled="true"> <label for="locality">City/Town</label> </div> <br> <div class="form-group"> <input id="administrative_area_level_2" name="administrative_area_level_2" type="tel" class="form-control" required disabled="true"> <label for="administrative_area_level_2">District</label> </div> <div class="form-group"> <input id="administrative_area_level_1" name="administrative_area_level_1" type="tel" class="form-control" required disabled="true"> <label for="administrative_area_level_1">State</label> </div> <br> <div class="form-group"> <input id="country" name="country" type="text" class="form-control" required disabled="true"> <label for="country">Country</label> </div> <div class="form-group"> <input id="postal_code" name="postal_code" type="tel" class="form-control" required disabled="true"> <label for="postal_code">Pin Code</label> </div> <br><br> <button> Save </button> <br> <br> </form> </center> </div> <!-- train section --> <div class="bhoechie-tab-content"> <center> <h4 class="glyphicon glyphicon-camera"></h4><br/>Camera </center> </div> <!-- hotel search --> <div class="bhoechie-tab-content"> <center> <h4 class="glyphicon glyphicon-plus"></h4><br/>Add Employee </center> </div> <div class="bhoechie-tab-content"> <center> <h4 class="glyphicon glyphicon-camera"></h4><br/>Camera </center> </div> <div class="bhoechie-tab-content"> <center> <h4 class="glyphicon glyphicon-user"></h4><br/>Employees </center> </div> </div> </div> </div> </div> </div>
div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #5A55A3; background-image: #5A55A3; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5A55A3; } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } /**************************************************************************************************/ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); /* background-clip: padding-box;*/ opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #5A55A3; background-image: #5A55A3; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5A55A3; } div.bhoechie-tab-content{ background-color: #ffffff; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } table { width: 100%;} table, th, td { border: 1px solid black; border-collapse: collapse;} th, td { padding: 5px; text-align: left;} table#t01 tr:nth-child(even) { background-color: #F6E6E3;} table#t01 tr:nth-child(odd) { background-color: #7E9987;} table#t01 th { background-color: Green; color: white;} /*88*****************************************************************************************************************/ .M1{ width: 160%; height: 100px; position: absolute; align:center; } .form-control{ background: transparent; } form { width: 320px; margin: 20px; } form > div { position: relative; overflow: hidden; } form input, form textarea { width: 100%; border: 2px solid gray; background: none; position: relative; top: 0; left: 0; z-index: 1; padding: 8px 12px; outline: 0; } form input:valid, form textarea:valid { background: #F0F7F7; } form input:focus, form textarea:focus { border-color: #357EBD; } form input:focus + label, form textarea:focus + label { background: #FA0; color: white; font-size: 70%; padding: 1px 6px; z-index: 2; text-transform: uppercase; } form label { -webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; position: absolute; color: #999; padding: 7px 6px; font-weight: normal; } form textarea { display: block; resize: vertical; } form.go-bottom input, form.go-bottom textarea { padding: 12px 12px 12px 12px; } form.go-bottom label { top: 0; bottom: 0; left: 0; width: 100%; } form.go-bottom input:focus, form.go-bottom textarea:focus { padding: 4px 6px 20px 6px; } form.go-bottom input:focus + label, form.go-bottom textarea:focus + label { top: 100%; margin-top: -16px; } form.go-right label { border-radius: 0 5px 5px 0; height: 100%; top: 0; right: 100%; width: 100%; margin-right: -100%; } form.go-right input:focus + label, form.go-right textarea:focus + label { right: 0; margin-right: 0; width: 40%; padding-top: 5px; } html, body { /*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/ background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; background-color: #FA0; color: #fff; text-align: left; text-shadow: 0 2px 6px rgba(0,0,0,.5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; vertical-align: top; } .cover-container { margin-right: auto; margin-left: auto; } /* Related to SIde MENU Text */ box-sizing: border-box; } body { background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg); text-align: right; padding-top: 40px; padding-left: 20px; } .btn-nav { color: Green; background-color: #fff; border: 1px solid #e0e1db; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .btn-nav:hover { color: #e92d00; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { color: #e92d00; padding: 2px; border-top: 6px solid #e92d00; border-bottom: 6px solid #e92d00; border-left: 0; border-right: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */ -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s; transition: border 0.3s ease-out, color 0.3s ease 0.5s; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } .btn-nav.active:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #e92d00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { padding-top: 16px; font-size: 40px; } .btn-nav.active p { margin-bottom: 8px; } @-webkit-keyframes pulsate { 50% { color: #000; } } @keyframes pulsate { 50% { color: #000; } } @media (max-width: 480px) { .btn-group { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 600px) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } }
$(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); }); });

Related: See More


Questions / Comments: