CODEWITHSUNDEEP
htmlcssbuttoncss-shapes
Ramez GaIal
Ramez GaIal

Reputation: 85

How to design like this button in css3?

i want to design like this button, i did 50% of it with border-radius, but how can i expand the lower part as same as in this picture ?, any trick ? enter image description here 

.list{
height: 280px;
width: 220px;
position: relative;
background: gray;
border-bottom: 3px solid darkblue
}
#open{
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px;
    margin-left: -22px;
    height: 50px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: darkblue;
    color: white;
}
button{
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}
<div class='list'>
<button id='open'>+</button>
</div>

bF.jpg

Upvotes: 0

Views: 71

Answers (1)

Roberto Bisello
Roberto Bisello

Reputation: 1235

if you want a css only solution, you can use masks... but they're not supported in IE/Edge 

.list{
height: 280px;
width: 220px;
position: relative;
background: gray;
border-bottom: 3px solid darkblue
}
#open{
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px;
    margin-left: -22px;
    height: 50px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: darkblue;
    color: white;
}

#open:before {
  content: ' ';
  background: red;
  width: 30px;
  height: 35px;
  left: -30px;
  position: absolute;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 30px, black 31px);
}

#open:after {
  content: ' ';
  background: red;
  width: 30px;
  height: 35px;
  left: 50px;
  position: absolute;
  -webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px);
}

button{
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}
<div class='list'>
<button id='open'>+</button>
</div>

Upvotes: 1

Related Questions