Multiple buttons to one circle

Question

Multiple buttons to one circle

1.8k Views Asked by Tobias Egli At 03 April 2025 at 06:29

I want to create a circle with distances with my 6 buttons. In the image you can see the result of my try but it doesn't look like a circle. I circled my problems with red. Below you can have a look on my HTML and CSS code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     .container {
margin-top: 360px;
margin-bottom: 16px;
padding-left: 30px;
padding-right: 30px;
}

     .top-left {
     margin-top: -260px;
     margin-left: -20px;
     border-radius: 40px / 100px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     position: absolute;
    }
    
    .top-right {
     margin-top: -260px;
     margin-left: 155px;
     border-radius: 40px / 100px;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-bottom-right-radius: 0;
     position: absolute;
    }
    
    .bottom-left {
     margin-top: -160px;
     margin-left: -20px;
     border-radius: 40px / 100px;
     border-top-right-radius: 0;
     border-top-left-radius: 0;
     border-bottom-right-radius: 0;
     position: absolute;
    }
    
    .bottom-right {
     margin-top: -160px;
     margin-left: 155px;
     border-radius: 40px / 100px;
     border-top-right-radius: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     position: absolute;
    }
    
    .top-center{
     border-radius: 440px / 220px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     width: 270px!important;
     height: 70px!important;
     margin-top: -334px;
     margin-left: 15px;
     position: absolute;
    }
    
    .top-center p {
     padding: 0px 40px 0px 40px;
    }
    
    .bottom-center{
     border-radius: 440px / 220px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 270px!important;
     height: 70px!important;
     margin-top: -64px;
     margin-left: 15px;
     position: absolute;
    }
    
    .bottom-center p {
     padding: 0px 40px 0px 40px;
    }
    
    .div-button {
     width: 168px;
     height: 92px;
     border: 2px solid rgba(77,207,255,1);
     background-color: transparent;
        color: rgba(77,207,255,1);
        font-size: 25px;
        text-align: center;
     vertical-align: middle;
     line-height: 100px;
     transition: all .3s linear;
    }
    
    .div-button p{
     margin-top: -10px!important;
     text-overflow: ellipsis;
     white-space: nowrap;
       overflow: hidden;
    }
    
    .button-selected {
     transform: scale(0.8);
     border: none;
     background-color: rgba(77,207,255,1);
     color: black;
    }
    </style>
</head>
<body>
  <div class="container">
 <div class="div-button top-center" id="top-center">
  <p>Text</p>
 </div>
 <div class="div-button top-left" id="top-left">
  <p>Text</p>
 </div>
 <div class="div-button top-right" id="top-right">
  <p>Text</p>
 </div>
 <div class="div-button bottom-left" id="bottom-left">
  <p>Text</p>
 </div>
 <div class="div-button bottom-right" id="bottom-right">
  <p>Text</p>
 </div>
 <div class="div-button bottom-center" id="bottom-center">
  <p>Text</p>
 </div>
</div>

</body>
</html>

Original Q&A

There are 1 best solutions below

**Matthew Brent** · Accepted Answer

As suggested in the comments, the svg route is the easiest way of reproducing what you want quickly.

However, liking the challenge, I used overflow:hidden and position:absolute to effectively mask out the different sections.

I created a pen here.

Any content you wish to place with inside the sections would need to go within the .circle div.

I hope this is along the lines of what you were wanting.

.circle-container {
            position:relative;
            display:block;
            width:400px;
            height:400px;
            margin:auto;
        }
        
        .circle-crop-top {
            width: 100%;
            height: 25%;
            display:block;
            overflow:hidden;
        }
        
        .circle-first-left, .circle-first-right, .circle-second-left, .circle-second-right {
            float:left;
            width: 50%;
            height: 25%;
            overflow: hidden;
            white-space: nowrap;
        }
        .circle-bottom {
            width:100%;
            height:25%;
            display: block;
            overflow:hidden;
        }
        .circle-parent {
            position:relative;
        }
        .circle-parent p {
            position:absolute;
            text-align:center;
            margin:0;
        }
        .circle {
            width:396px;
            height:396px;
            border-radius:50%;
            position: absolute;
            top:0;
            border:2px solid blue;
            text-align: center;
            overflow:hidden;
        }
        .circle-first-left .circle {
            top:-100px;
        }
        .circle-first-right .circle {
            top:-100px;
            right: 0;
        }
        .circle-second-left .circle {
            top:-200px;
        }
        .circle-second-right .circle {
            top:-200px;
            right: 0;
        }
        .circle-bottom .circle {
            top:-300px;
            right: 0;
        }
        .circle-crop-top p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 50px;
            padding-top: 40px;
            text-align: center;
            top: -2px;
        }
        .circle-first-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            left:-2px;
        }
        .circle-first-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            right:-2px;
        }
        .circle-second-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            left:-2px;
        }
        .circle-second-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            right:-2px;
        }
        .circle-bottom p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 60px;
            padding-top: 40px;
            text-align: center;
            top: 76%;
        }

<div class="circle-container">
        <div class="circle-crop-top">
            <div class="circle-parent">
                <div class="circle"><p>Luzern</p></div>
            </div>   
        </div>
        <div class="circle-first-left">
            <div class="circle-parent">
                <div class="circle"><p>Bern</p></div>
            </div>
        </div>
        <div class="circle-first-right">
            <div class="circle-parent">
                <div class="circle"><p>Zurich</p></div>
            </div>
        </div>
        <div class="circle-second-left">
            <div class="circle-parent">
                <div class="circle"><p>Basel</p></div>
            </div>
        </div>
        <div class="circle-second-right">
            <div class="circle-parent">
                <div class="circle"><p>Genf</p></div>
            </div>
        </div>
        <div class="circle-bottom">
            <div class="circle-parent">
                <div class="circle"><p>Saas-Fee, Alpin</p></div>
            </div>
        </div>
    </div>

Multiple buttons to one circle

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TIZEN

Trending Questions

Popular # Hahtags

Popular Questions