<div id="container"> <div id="breadcrumbs"> <div class="button"> <span class="label">Start</span> <span class="arrow"><span></span></span> </div> <div class="button"> <span class="label">Products</span> <span class="arrow"><span></span></span> </div> <div class="button"> <span class="label">Colors</span> <span class="arrow"><span></span></span> </div> <div class="button"> <span class="label">White</span> <span class="arrow"><span></span></span> </div> </div> </div>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; font-size: 12px; } body {background-color: #d3d7cf;} #container { width: 285px; margin: 0 auto; margin-top: 23%; } #breadcrumbs { display: inline-block; margin: 10px; padding-right: 18px; border-radius: 10px; box-shadow:0 0 1px rgba(0,0,0,0.5); } .button { display: inline-block; cursor: pointer; margin-right: -20px; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25); background-color: #729fcf; background: -moz-linear-gradient(top, #729fcf, #3465a4); background: -o-linear-gradient(top, #729fcf, #3465a4); background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4)); } .button:hover { background-color: #3465a4; background: -moz-linear-gradient(bottom, #729fcf, #3465a4); background: -o-linear-gradient(bottom, #729fcf, #3465a4); background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4)); box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);} .button:first-child {border-radius: 10px 0 0 10px;} .button:last-child {border-radius: 0 10px 10px 0;} .label { text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4; color: white; height: 30px; padding: 8px; -moz-user-select: none; -webkit-user-select: none; display: inline-block; padding-left: 25px; } .button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;} .button:first-child .label {padding-left: 15px;} .button:last-child .label {padding-right: 15px;} .button:last-child .arrow {display: none;} .arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;margin-left: -5px;} .arrow span { border-radius: 5px; width: 24px;height: 24px; display: inline-block; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); margin-left: -13px; margin-top: 3px; box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25); background-color: #729fcf; background: -moz-linear-gradient(135deg, #3465a4, #729fcf); background: -o-linear-gradient(135deg, #3465a4, #729fcf); background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf)); } .button:hover .arrow span { background-color: #3465a4; background: -moz-linear-gradient(135deg, #729fcf, #3465a4); background: -o-linear-gradient(135deg, #729fcf, #3465a4); background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf)); box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25); }