Services unikue

by agustinmorelle

HTML

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="services-container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

<div class="services-container">

    <div class="left-button">
        <button type="button" class="btn-service">
            Development
        </button>
    </div>

    <div class="center-button">
        <button type="button" class="btn-service btn-service-lg">
            Website Management
        </button>
    </div>

    <div class="right-button">
        <button type="button" class="btn-service">
            Branding Design
        </button>
    </div>
</div>

CSS

.services-container {
    width:100%;
    text-align:center;
}
.btn-service{
  background-color:#B841D5;
  color:white;
  border-radius:50px;
  border: 0px;
  height:40px;
  width:130px;
}
.btn-service-lg{
  width:180px!important;
}
.left-button {
    text-align:center;
    float:left;
    width:200px;
}
.left {
    float:left;
    width:200px;
    height: 100px;
    border-radius:8px;
    border-style: solid;
    border-color: #B841D5;
}

.center {
    display: inline-block;
    margin:0 auto;
    width:200px;
    height: 100px;
    border-radius:8px;
    border-style: solid;
    border-color: #B841D5;
}
.center-button {
   display: inline-block;
    margin:0 auto;
    width:200px;
    height: 100px;
   
}

.right {
   
    float:right;
    width:200px;
    height: 100px;
    border-radius:8px;
    border-style: solid;
    border-color: #B841D5;
}
.right-button {
    float:right;
    width:200px;
    height: 100px;
    
}