CODEWITHSUNDEEP
css
Baruch_Mashasha
Baruch_Mashasha

Reputation: 207

How to make this dots menu in css?

I want to make menu button with dots:

enter image description here

this my button css:

.popup-btn
  height: 35px
  width: 35px
  border-radius: 50%
  background: gray

Thanks

Upvotes: 1

Views: 2501

Answers (4)

Ori Drori
Ori Drori

Reputation: 191986

You can draw the dots with 3 linear gradient, and then position them:

div {
  width: 32px;
  height: 32px;
  margin: 20px auto;
  border-radius: 50%;
  background: gray;
  background-image:
    radial-gradient(white 2px, transparent 2px),
    radial-gradient(white 2px, transparent 2px),
    radial-gradient(white 2px, transparent 2px);
  background-position:
    center -7px,
    center center,
    center 7px;
}
<div></div>

Upvotes: 2

Drago96
Drago96

Reputation: 1407

You should probably use SVGs or Icon Fonts to do what you want (it is also possible to do it with css as shown by gildas, but it will probably be less intuitive).

Icon fonts

That icon is included in many Icon fonts, like glyphicon or fontawesome, and this technique is easy to use. Only problem, it will download many other icons and not just the one you want.

SVG

SVG is a good option in this situation, since you can easily use it without the weight of a full icon font. You can download an svg from many websites, like flaticon for example. Once you downloaded the svg, you can include it like this:

<button class="popup-button"><img class="icon" src="path/to/icon.svg"></button>

than you can give some size to the icon as if it was a normal image:

.icon {
    width: 15px;
    height: 15px;
}

Upvotes: 0

Sanju
Sanju

Reputation: 236

HTML

<div class="dot-wrapper">
  <div class="position-dots">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS

.dot-wrapper {
   position: relative;
   width: 50px;
   height: 50px;
   border-radius: 100%;
   background-color: #CCC;
   display: flex;
   justify-content: center;
   align-items: center;
   .position-dots {

      span {
       width: 4px;
       height: 4px;
       display: block;
       background-color: white;
       border-radius: 100%;
       margin: 2px;
     }
   } 
 }

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You can use box-shadow and Pseudo-elements

div{
  width: 32px;
  height: 32px;
  background: black;
  margin: 20px auto;
  border-radius: 50%;
  position:relative;
}
div:before{
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    margin-left: -2px;
    background: hsl(0, 0%, 100%);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    box-shadow: 0px 8px white, 0px 16px white;
}
<div></div>

Upvotes: 8

Related Questions