What are the steps to create a button with similar design using css3?

Question

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? https://i.sstatic.net/3ZJFS.jpg

.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

html css button css-shapes

Answer 1

Answer №1

You can achieve a css-only solution with masks, although please note that they are not compatible with IE/Edge browsers.

.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>

Answer 2

You can achieve a css-only solution with masks, although please note that they are not compatible with IE/Edge browsers.

.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>

What are the steps to create a button with similar design using css3?

Answer №1

Similar questions

Flexbox and CSS3 width/height declarations causing problems with vertical alignment

Importing Data from Wordpress JSON Feed to Create a Table

Showing a variety of pictures within a specified time frame

Issues with Collapse Feature on Bootstrap 3 Navbar

Unable to exceed a width of 100% in Asp.net Tables

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Error: The function $.simpleTicker is not defined

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

create a recurring design wallpaper within the TinyMCE editor

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Turn off and then turn on user input without exiting the textarea

Exploring jQuery: Moving between different table cells using traversal techniques

hitting the value of the text input

What is the standard size for PHP files, or the suggested maximum limit?

Which slider was featured in the unity3d.com/5 website?

Rails encounters problems when assets are modified

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

Implementing timeAgo with jQuery (or a similar tool) to display the elapsed time since a user (client) accesses or updates a webpage

Is there a way to adjust the height relative to the viewport in Bootstrap 5 for values other than 100?