Hover BreadCrumbs - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover

Description

Hover BreadCrumbs

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
body {<!--   w  w  w . ja  v  a 2s  .  c o m-->
   background:Chartreuse;
}

.wizard {
   display:table;
   margin:0 auto;
}

.wizard .badge {
   background:yellow;
   position:relative;
   display:inline-block;
   text-align:center;
   margin:0 31px;
   padding:11px 13px;
}

.wizard .badge:after {
   width:0;
   height:0;
   border-top:21px inset blue;
   border-bottom:21px inset pink;
   border-left:21px solid OrangeRed;
   position:absolute;
   content:"";
   top:0;
   right:-21px;
}

.wizard .badge:before {
   width:0;
   height:0;
   border-top:21px inset grey;
   border-bottom:21px inset BlueViolet;
   border-right:21px solid Chartreuse;
   position:absolute;
   content:"";
   top:0;
   left:-21px;
}

.wizard .fim {
   background:yellow;
   position:relative;
   display:inline-block;
   width:86px;
   height:26px;
   color:blue;
   font-family:sans-serif;
   text-align:right;
   padding:11px 0 6px;
}

.wizard .fim:after {
   width:0;
   height:0;
   border-top:21px inset pink;
   border-bottom:21px inset OrangeRed;
   border-left:21px solid grey;
   position:absolute;
   content:"";
   top:0;
   right:-21px;
}

.wizard .fim:before {
   width:0;
   height:0;
   border-top:21px solid BlueViolet;
   border-bottom:21px inset Chartreuse;
   border-left:21px solid yellow;
   position:absolute;
   content:"";
   top:0;
   left:-21px;
}

.wizard .fim:hover:after {
   border-top:21px solid blue;
   border-bottom:21px inset pink;
   border-left:21px solid OrangeRed;
}

.wizard .fim:hover:before {
   border-top:21px solid grey;
   border-bottom:21px inset BlueViolet;
   border-left:21px solid Chartreuse;
}

.wizard .inicio {
   background:yellow;
   position:relative;
   display:inline-block;
   width:66px;
   height:21px;
   color:blue;
   font-family:sans-serif;
   padding:11px 13px 11px 0;
}

.wizard .inicio:after {
   width:0;
   height:0;
   border-top:21px solid pink;
   border-bottom:21px inset OrangeRed;
   border-right:21px solid grey;
   position:absolute;
   content:"";
   top:0;
   right:-21px;
}

.wizard .inicio:before {
   width:0;
   height:0;
   border-top:21px solid BlueViolet;
   border-bottom:21px inset Chartreuse;
   border-right:21px solid yellow;
   position:absolute;
   content:"";
   top:0;
   left:-21px;
}

.wizard .inicio:hover,.wizard .fim:hover {
   background:blue;
   color:pink;
}

.wizard .inicio:hover:after {
   border-top:21px solid OrangeRed;
   border-bottom:21px inset grey;
   border-right:21px solid BlueViolet;
}

.wizard .inicio:hover:before {
   border-top:21px solid Chartreuse;
   border-bottom:21px inset yellow;
   border-right:21px solid blue;
}
</style> 
 </head> 
 <body> 
  <div class="wizard"> 
   <a class="inicio">Lorem</a> 
   <a class="badge">Lorem ipsum dolor sit a</a> 
   <a class="fim">Lorem</a> 
  </div>  
 </body>
</html>

Related Tutorials