Some East effect:
Easy to achieve results:
P.S: Picture is not the point ....
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head> <styletype= "Text/css">Body{padding:0px;margin:0px;font-family:"XXFarEastFont-Xingkai"; }. St-1{width:35px;Height:35px;Background-color:#666;position:relative; Left:95%;Top:100px;Border-radius:6px;Margin-top:4px; }img{margin:8px; }. St-1:hover{background:Pink;Border-radius:0 6px 6px 0; }. St-1:hover Div{Height:35px;width:75px;background:Pink;position:Absolute; Left:-72px;Top:0px;Border-radius:6px 0 0 6px; }. St-1:hover Div:after{Display:Block;Color:#666;content:"Shopping Cart";padding:10px; } </style><Body> <Divclass= "St"> <Divclass= "St-1"> <imgsrc= "1.jpg" /> <Div></Div> </Div> <Divclass= "St-1"> <imgsrc= "2.jpg" /> <Div></Div> </Div> <Divclass= "St-1"> <imgsrc= "3.jpg" /> <Div></Div> </Div> <Divclass= "St-1"> <imgsrc= "4.jpg" /> <Div></Div> </Div> <Divclass= "St-1"> <imgsrc= "5.jpg" /> <Div></Div> </Div> </Div></Body></HTML>
A small case of a shortcut button on the east Side