Ad

Slot Button With Circle Left And Right

- 1 answer

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

Ad

Answer

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>

Ad
source: stackoverflow.com
Ad