Nice looking breadcrumb design demo. this design useful for submenu,step form,sub webpage etc. this breadcrumb design is fully responsive. also you can do custom your custom change.

We allows to free snippets of breadcrumb css, you can download full code of bootstrap breadcrumb style layout. Here in this post i will give you example of responsive breadcrumbs css snippet and you will get simple code of html, css and jquery. In breadcrumb navigation example in html snippet i give you three tab with html, css and js, you can easily get code of css breadcrumb generator layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="main-section"> <div class="breadcrumb flat"> <a href="#" class="active"><i class="fa fa-home"></i> Browse</a> <a href="#">Compare</a> <a href="#">Order Confirmation</a> <a href="#">Checkout</a> <a href="#">Checkout</a> </div> <div class="breadcrumb-second flat"> <a href="#" class="active"><i class="fa fa-home"></i> Browse</a> <a href="#">Compare</a> <a href="#">Order Confirmation</a> <a href="#">Checkout</a> </div> </div> </body> </html>
body{ background-color: #0191C8; } .main-section{ width:70%; margin:0 auto; border:1px solid #005B9A; margin-top:150px; background-color: #74C2E1; padding:30px; } .breadcrumb{ display: inline-block; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); margin-bottom:20px; overflow: hidden; border-radius: 5px; } .breadcrumb-second{ display: inline-block; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); margin-bottom:20px; } .breadcrumb a,.breadcrumb-second a{ text-decoration: none; float: left; font-size:15px; line-height: 36px; padding: 0px 20px 0 40px; position: relative; } .breadcrumb a.active, .breadcrumb a:hover, .breadcrumb-second a.active, .breadcrumb-second a:hover{ color:#fff; } .breadcrumb a:after{ content: ''; position: absolute; right:-16px; width: 34px; height: 34px; top:1px; transform: scale(0.707) rotate(45deg); z-index: 1; background: #666; background: linear-gradient(135deg, #666, #333); box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); border-radius: 0 5px 0 50px; } .breadcrumb-second a:after{ content: ''; position: absolute; right:-16px; width: 34px; height: 34px; top:1px; transform: scale(0.707) rotate(45deg); z-index: 1; background: #666; background: linear-gradient(135deg, #666, #333); box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); border-radius: 0 5px 0 50px; } .flat a, .flat a:after { background: white; color: black; transition: all 0.5s; } .flat a:hover, .flat a.active, .flat a:hover:after, .flat a.active:after{ background: #9EEB62; }




Random Post




Related Post

How to create custom loading image or div using css ?

How to create custom loading image or div using css ?

Simple loading div and you can easaly implement in your project. in this loading you can also change loading image color. this image not load on server. you...

Read More
Custom good looking checkbox and radio button design usign bootstrap

Custom good looking checkbox and radio button design usign b...

checkbox and radio button with onclick custom effect. and also you can change color and effect. and you can easaly implement in your project. you can get cod...

Read More
Custom process div and image usign html,css and bootstrap

Custom process div and image usign html,css and bootstrap

Bootstrap loading image and div. this loader working usign only html and css. this loading image is responsive. and you can also change image color and animatio...

Read More