Slot button with circle left and right

Question

I am trying to create a button which is slot shaped. It has a circle either on the left or right hand side. However I am really struggling with the width and alignment of both the text and circle. This is what I have right now:

  .Buttons{
  border-style: dotted ;
  border-radius: 150px;
  width: 300x;
  height: 150px;
  margin: 20px;
  background-color:transparent;
  text-align: left;
  position: relative;
  }
  
  .circle {
    width: 140px;
    height: 140px;
    -webkit-border-radius: 140px;
    -moz-border-radius: 140px;
    border-radius: 140px;
    background: green;
  }

  .purple{
  background:purple;
  position: absolute;
  border-radius: 100%;
  left:400px;
  top:3px;
  }
  
    .titelKleur{
   color:rgb(51,180,231);
    vertical-align: top;
    top: 1px;
    /*position:absolute;*/
  }
  .textKleur{
   color:rgb(139,139,139);
    font-size:16;
  }

        <button id=button1 value="0" class="Buttons"> 
         <div id="circle" class="circle"></div>
         <h1 class="titelKleur">Secure</h1><br>
         <h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
        </button><br>
        
           <button id=button6 value="5" class="Buttons">
           <h1 class="titelKleur">Fast</h1><br>
           <h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
           <div id="circle" class="circle purple"></div>
         </button>

This is basically what I like to achieve:

Rough paint drawing

The slots should have an equal width and the text should be centered vertically. I later want to change the text by hover using jQuery, but that will be later on :p

Thanks in advance! Koen

Look at the second example in [this answer](https://stackoverflow.com/a/17005494/519413). Is that what you're trying to create? — Rory McCrossan, May 05 '20 at 08:06

vals · Accepted Answer · 2020-05-05T14:22:13.593

I have used display: flex on the button to properly align the items.

It wasn't clear from your question what should be done with titles. I have set them on the upper center.

.Buttons {
  border-style: dotted;
  border-radius: 150px;
  width: 300x;
  height: 150px;
  margin: 20px;
  background-color: transparent;
  text-align: left;
  position: relative;
  display: flex;
}

.circle {
  width: 140px;
  height: 140px;
  border-radius: 140px;
  background: green;
  align-self: center;
  flex-shrink: 0;
}

.purple {
  background: purple;
}

.titelKleur {
  color: rgb(51, 180, 231);
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.textKleur {
  color: rgb(139, 139, 139);
  font-size: 16;
  align-self: center;
  padding: 5px;
}

<button id=button1 value="0" class="Buttons"> 
         <div class="circle"></div>
         <h1 class="titelKleur">Secure</h1><br>
         <h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
        </button><br>

<button id=button6 value="5" class="Buttons">
           <h1 class="titelKleur">Fast</h1><br>
           <h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
           <div class="circle purple"></div>
         </button>

Thank you for your fast response! Didn't knew about the option display:flex.However, this will morph the circle to a different shape if the browser width becomes smaller. What I meant with the hover is changing the text from "Fast" to the text "Speed is important". And light it up with this jQuery code: jQuery("button").mouseenter(function(){ jQuery(this).css("box-shadow", "0 0px 30px 0 rgba(53, 178, 232, 0.8), 0 0px 20px 0 rgba(53, 178, 232, 0.19)"); }); jQuery("button").mouseleave(function(){ jQuery( this ).css("box-shadow", "0 0px 0px"); }); While still keeping it centered — KoenR, May 05 '20 at 11:16
I have added flex-shrink : 0 to avoid the circles shrinking. And , as you said in the question, the hover effect will be later... — vals, May 05 '20 at 14:23

Slot button with circle left and right

1 Answers1