How to draw this chart in html and CSS?

Question

Please how to do this chart in HTML and CSS ??

Where the circles are buttons ..

Answer 1

Use the following:
Your basic circle:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;  /*Make it a circle (border-radius = 1/2*width & height)*/
  background-color: hotPink;
  border: none;
}

<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->

Then use position: absolute; with the left and right properties to position the circles.

Have a `Live positioned in the middle of your page with:

<style>
 #text {
    font-family: MyFont, sans-serif;
    color: white;
 }
<style>

---

For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit

---

Use the above to help you create what you want, but as has already been said,

This is not a code generating service, try yourself and ask questions about the code you're having trouble with.

In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck