HTML/CSS Challenges: Dealing with Play Button Alignment Issues

Having a header on the left side and wanting to insert a button in line with the header on the right side has me facing some issues.

Setting "position:relative" and "top:400px" moves the button perfectly, as does adding "left:200px". However, upon hovering over the button, it shifts back to the center of the page. How can I prevent this behavior?

I've prepared image illustrations showing the movements: https://i.sstatic.net/MMIO6.jpg

**Note that without "left:200px", the button remains aligned without moving to the center of the page. Attempted solutions, such as removing "text-align:center;", have not resolved the issue.

Below is the code snippet for reference: 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> 

htmlcss

Answer №1

check out this demonstration for assistance

/*===== 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 https://i.sstatic.net/te7SA.png

on hover https://i.sstatic.net/7Jq7g.png

Answer №2

Try adding position: absolute to the CSS of your .playBut element. The top and left properties will only work when the positioning is set to absolute.

For a visual example, you can check out this CodePen link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Equally spacing list items in a vertical manner

I've looked everywhere, but none of the suggestions seem to achieve what I need. Essentially, my list is contained within a ul element with a specified height. I want the list items inside to have equal spacing between each other, and in relation to t ...

htmlcss

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

phpjqueryhtmljson

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

cssnode.jsexpress

sound not functioning on iPad

<audio id="example" controls="controls"> <source src="1.mp3" type="audio/mpeg" /> <source src="1.ogg" type="audio/ogg" /> </audio> JavaScript code to automatically play video when the page loads document.getElementById(&ap ...

javascriptipadhtmlaudio

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

I have some script tags as shown below: <script src="cordova-2.5.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.1.min.js"></script> <script src="js/jquery.xdomainajax ...

javascriptjqueryhtml

The sticky navigation bar unexpectedly jerks and creates a glitch

For the past few days, I've been grappling with a persistent issue that seems to be causing glitches on my site, especially when viewed on my iPhone. The problem lies in the sticky navbar, which snaps to the wrong place and jumps too fast when scrolli ...

javascripthtmlcssnavbar

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

htmlcsstwitter-bootstrap

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. Th ...

htmlcsstwitter-bootstrapbootstrap-4

Two adjacent divs positioned next to each other, where the right-hand div occupies the remaining space within its

I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them. However, my requirements have made this problem more complicated to solve... What I would ...

htmlcsscss-float

Issue with jQuery animation: Background color does not change upon scrolling

Here is my fiddle link: https://jsfiddle.net/jzhang172/owkqmtcc/5/ I am attempting to change the background color of the "content" div when scrolling anywhere within it. The goal is for the background color to change when scrolling and revert back to its ...

javascriptjqueryhtmlcss

Tips for preventing <v-layouts> from impacting one another

I'm currently working on a dynamic link box for a homepage website, which can be viewed at . Inside this link box, I have included a button that allows the creation of buttons that function as links. Interestingly, the layouts of both the options but ...

htmltypescriptvuetify.js

What is the easiest and most straightforward method for deploying HTML and JavaScript in Service Mix?

I am currently working on a small HTML/web page project and I am interested in deploying service mix. Although I have knowledge of the web page side and I am familiar with service mix, I haven't ventured into using a simple HTML/JavaScript setup withi ...

javascripthtmlapache-karafkaraf

What is the process for developing a dropdown menu with a text input field using AngularJS?

I want to implement a dropdown menu in AngularJS similar to the one shown here. I have already created the button with FontAwesome icons inside. Any suggestions or resources for achieving this? Check out this Dropdown Text Input Example var mainApp = ...

htmlangularjssass

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries

Leveraging webpack alongside url-loader for embedding images within React applications

When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...

cssreactjswebpackwebpack-file-loader

Explain the assigned identifier for the input parameter

Trying to send data (Collection<Cars>) using AJAX with JQuery, but struggling to define the object in my Action input parameter. I attempted to define it as FormCollection and received all data successfully. However, my goal is to define it as IColle ...

jqueryhtmlajaxasp.net-mvc-3asp.net-mvc-4

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

javascriptcssreactjsreact-reduxmaterial-ui

Retrieving the next row from a MySQL result in order to compare an index with the current row. If they are the same, the loop will output

When generating a report dynamically by fetching values using mysqli_query, the current output can be seen here: https://i.sstatic.net/fD3mm.png. The desired format is to display the project title only once while echoing tasks for the same project. For exa ...

phphtmlmysqlweb-applicationsphpmyadmin

Restrict the dimensions of a div positioned between two navigation bars

Having an issue with the development of a web app using Angular and Bootstrap 4.0.0 CSS framework. The goal is to have the app fit the screen size without any scrollbars. <nav class="navbar fixed-top navbar-expand navbar-dark"> Upper navBar ...

htmlcssangulartwitter-bootstrapbootstrap-4

CSS - setting the background-image property is not displaying the image

.main_banner { background-image: url("../images/main_banner.png"); width: 100%; height: auto; } <!DOCTYPE html> <html> <heading> <title> ********** </title> <link rel="sty ...

htmlcssbackground-image