It is necessary to fix the button on the left edge. The block position: fixed; . For some reason, left: 0; does not work.

 <a href="http://cegit/ova/knowledge_base" target="_blank"> <div class="knowledge-base-button"> <div class="rotate">Сундук продавца</div> <img src="data:image/svg+xml;utf8;base64 /> </div> </a> .knowledge-base-button { position: fixed; z-index: 999; top: 250px; left: 0; background: #f06420; width: auto; padding: 5px 10px; height: auto; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 0 0 5px 5px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .knowledge-base-button .rotate { display: inline-block; color: #fff; font-size: 18px; letter-spacing: 2px; line-height: 2; } .knowledge-base-button img { margin: 2px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg)); -webkit-transition:all 400ms; -moz-transition:all 400ms; -o-transition:all 400ms; transition:all 400ms; } .knowledge-base-button:hover img { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); }

Full code

How to press a fixed button to the left?

    1 answer 1

     .knowledge-base-button { position: fixed; z-index: 999; top: 250px; left: 0; background: #f06420; width: auto; padding: 5px 10px; height: auto; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 0 0 5px 5px; -moz-transform: rotate(-90deg) translate(-50%, 50%); -ms-transform: rotate(-90deg) translate(-50%, 50%); -webkit-transform: rotate(-90deg) translate(-50%, 50%); -o-transform: rotate(-90deg) translate(-50%, 50%); transform: rotate(-90deg) translate(-50%, 50%); transform-origin: 0 50%; } .knowledge-base-button .rotate { display: inline-block; color: #fff; font-size: 18px; letter-spacing: 2px; line-height: 2; } .knowledge-base-button img { margin: 2px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg)); -webkit-transition: all 400ms; -moz-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .knowledge-base-button:hover img { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } 
     <a href="http://cegit/ova/knowledge_base" target="_blank"> <div class="knowledge-base-button"> <div class="rotate">кнопка</div> <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/+CiAgICA8cGF0aCBkPSJtMzgzLjUsMjYyYzcuOTk1LDAgMTQuNS02LjUwNSAxNC41LTE0LjVzLTYuNTA1LTE0LjUtMTQuNS0xNC41LTE0LjUsNi41MDUtMTQuNSwxNC41IDYuNTA1LDE0LjUgMTQuNSwxNC41eiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPHBhdGggZD0ibTM4My41LDMxM2MtNy45OTUsMC0xNC41LDYuNTA1LTE0LjUsMTQuNXM2LjUwNSwxNC41IDE0LjUsMTQuNSAxNC41LTYuNTA1IDE0LjUtMTQuNS02LjUwNS0xNC41LTE0LjUtMTQuNXoiIGZpbGw9IiNGRkZGRkYiLz4KICA8L2c+Cjwvc3ZnPgo=" /> </div> </a> / svg + xml; utf8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI / + CiAgICA8cGF0aCBkPSJtMzgzLjUsMjYyYzcuOTk1LDAgMTQuNS02LjUwNSAxNC41LTE0LjVzLTYuNTA1LTE0LjUtMTQuNS0xNC41LTE0LjUsNi41MDUtMTQuNSwxNC41IDYuNTA1LDE0LjUgMTQuNSwxNC41eiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPHBhdGggZD0ibTM4My41LDMxM2MtNy45OTUsMC0xNC41LDYuNTA1LTE0LjUsMTQuNXM2LjUwNSwxNC41IDE0LjUsMTQuNSAxNC41LTYuNTA1IDE0LjUtMTQuNS02LjUwNS0xNC41LTE0LjUtMTQuNXoiIGZpbGw9IiNGRkZGRkYiLz4KICA8L2c + Cjwvc3ZnPgo =" <a href="http://cegit/ova/knowledge_base" target="_blank"> <div class="knowledge-base-button"> <div class="rotate">кнопка</div> <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/+CiAgICA8cGF0aCBkPSJtMzgzLjUsMjYyYzcuOTk1LDAgMTQuNS02LjUwNSAxNC41LTE0LjVzLTYuNTA1LTE0LjUtMTQuNS0xNC41LTE0LjUsNi41MDUtMTQuNSwxNC41IDYuNTA1LDE0LjUgMTQuNSwxNC41eiIgZmlsbD0iI0ZGRkZGRiIvPgogICAgPHBhdGggZD0ibTM4My41LDMxM2MtNy45OTUsMC0xNC41LDYuNTA1LTE0LjUsMTQuNXM2LjUwNSwxNC41IDE0LjUsMTQuNSAxNC41LTYuNTA1IDE0LjUtMTQuNS02LjUwNS0xNC41LTE0LjUtMTQuNXoiIGZpbGw9IiNGRkZGRkYiLz4KICA8L2c+Cjwvc3ZnPgo=" /> </div> </a>