HTML / CSS中的播放按钮对齐问题

Question

I have a header on the left side and want to add a button inline with the header on the right side.

When I add "position:relative: and top:400px, it moves the button perfectly. When i add "left:200px" it moves the button perfectly again, but when i hover it moves the button back to center of page.

How do i stop it from doing this?

i've created IMG images to show specifically how it moves: https://imgur.com/a/SMLCbmN

**note when left:200px; is not added, the button doesn't move to center of page. i've tried removing the "text-algin: center;" along with a lot of other ideas..but am stuck.

Here is the code: https://codepen.io/TheGreatEscape/pen/ebYgGO

 .container { width: 100%; text-align: center; margin-top: 0vh; } .circle { stroke: #f70f4d; stroke-dasharray: 650; stroke-dashoffset: 650; -webkit-transition: all 0.5s ease-in-out; opacity: 0.3; } .playBut { position: relative; top: 400px; left: 200px; border: none; -webkit-transition: all 0.5s ease; } .playBut .triangle { -webkit-transition: all 0.7s ease-in-out; stroke-dasharray: 240; stroke-dashoffset: 480; stroke: #000; transform: translateY(0); } .playBut:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #f70f4d; animation: nudge 0.7s ease-in-out; } @keyframes nudge { 0% { transform: translateX(0); } 30% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .playBut:hover .circle { stroke-dashoffset: 0; opacity: 1; } 

 <div class='container'> <a href='#' class='playBut'> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" xml:space="preserve"> <polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 73.5,62.5 148.5,105.8 73.5,149.1 "/> <circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/> </svg> </a> </div> 

Answer 1

Add position: absolute to your .playBut . top and left works only on absolute position.

See example here

Answer 2

see this demo if it helps

 /*===== PLAY BUTTON ===*/ .container { width: 100%; text-align: center; margin-top: 0vh; } .circle { stroke: #f70f4d; stroke-dasharray: 650; stroke-dashoffset: 650; -webkit-transition: all 0.5s ease-in-out; opacity: 0.3; } .playBut { /*position: relative; top:400px; left:200px;*/ border: none; -webkit-transition: all 0.5s ease; } .playBut .triangle { -webkit-transition: all 0.7s ease-in-out; stroke-dasharray: 240; stroke-dashoffset: 480; stroke: #000; transform: translateY(0); } .playBut:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #f70f4d; animation: nudge 0.7s ease-in-out; } @keyframes nudge { 0% { transform: translateX(0); } 30% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .playBut:hover .circle { stroke-dashoffset: 0; opacity: 1; } h2.title { font-size: 40px; margin: 60px 0 0; display: inline-block; float: left; } 

 <div class='container'> <h2 class="title">some text</h2> <a href='#'class='playBut'> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" xml:space="preserve"> <polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 73.5,62.5 148.5,105.8 73.5,149.1 "/> <circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/> </svg> </a> </div> 

Update you need

a.playBut, a.playBut:hover, a.playBut:active, a.playBut:focus {
    left: 800px;
    right: auto;
}

see demo

normal

on hover