サイド固定バナー（マイカートボタンなど）

CSS

test.css

@media screen and (min-width: 400px /*表示させたくない最小の大きさを記入（これはスマホの画面の大きさ）*/){
#sidebanner a{ display: none;}
}
#sidebanner a{
display: block;
background: url("画像URL")/*通常時画像*/ no-repeat scroll 0 0;
width: 50px;/*画像幅*/
height: 150px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
right:0px;
top:140px;
}

#sidebanner a:hover{
display: block;
background: url("画像URL")/*マウスオーバー時画像*/ no-repeat scroll 0 0;
width: 50px;/*画像幅*/
height: 150px;/*画像高さ*/
text-indent:-9999px;
position:fixed;
right:0px;
top:140px;
-webkit-transition: width ease-in-out 0.5s;/*マウスオーバーの動く時間を記入して滑らかさを調節*/
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

HTML

test.html

<div id="sidebanner">
<a href="リンク先URL"></a>
</div>