Creating “ring shaped” buttons in CSS

Question

I'm creating a Simon game using HTML, CSS and jQuery. My design is based on this game on iOS .

I'd really like to get the buttons to look like rings!

I've tried a few solutions using a relative parent div and absolute children divs but the problem is that because I'm using Bootstrap Grid System and it's responsive; when I inspect the web page to adjust the divs position or adjust the screen ratio everything moves around and it looks terrible.

Using box-shadow: inset on the button to create the ring has been the most promising but I'm already using box-shadow to create a neon glow that it isn't really an option for me. (If there is a way to do both this could be promising.)

 .btn-circle.btn-xl { width: 140px; height: 140px; padding: 10px 16px; border-radius: 70px; font-size: 24px; line-height: 1.33; } .btn-circle { width: 60px; height: 60px; padding: 6px 0px; border-radius: 30px; text-align: center; font-size: 12px; line-height: 1.42857; } #btn1 { background-color: blue; box-shadow: 0 0 5px blue, 0 0 10px #fff, 0 0 20px blue, 0 0 30px blue, 0 0 40px blue, 0 0 55px blue, 0 0 75px blue; } #btn2 { background-color: Red; box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 55px red, 0 0 75px red; } 

 <div class="row"> <div class="col-md-3 offset-md-3"> <button type="button" id="btn1" class="btn btn-default btn-circle btn-xl">1</button> </div> <div class="col-md-3"> <button type="button" id="btn2" class="btn btn-default btn-circle btn-xl">2</button> </div> </div> 

ANy help would greatly be appreciated.

Answer 1

Is this what u want?

In the example, i added 2 box shadows for the buttton. using

  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 0px 7px rgb(0, 255, 20);

first one for outer glow, and second for creating the ring.

 body { background: grey; } .btn-circle.btn-xl { width: 140px; height: 140px; padding: 10px 16px; border-radius: 70px; font-size: 24px; line-height: 1.33; } .btn-circle { width: 60px; height: 60px; padding: 6px 0px; border-radius: 30px; text-align: center; font-size: 12px; line-height: 1.42857; } .btn-circle:focus { outline: none; } .ring1 { background-color: transparent; border: 0; box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 0px 7px rgb(0, 255, 20); } .glowbtn { background-color: #00ff14; border: 0; box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69); } .border-ring { background: transparent; border: 8px solid #00ff14; box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69); } .inner-glow { background: transparent; border: 8px solid #00ff14; box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 20px 7px rgba(0, 255, 20, 0.69); } 

 <div class="row"> <div class="col-md-3"> <button type="button" class="btn btn-default btn-circle btn-xl ring1">3</button> </div> <br/> <div class="col-md-3"> <button type="button" class="btn btn-default btn-circle btn-xl glowbtn">3</button> </div> <br/> <h3>Can be created using only border and box shadow</h3> <div class="col-md-3"> <button type="button" class="btn btn-default btn-circle btn-xl border-ring">3</button> </div> <h3>ring button with inner glow</h3> <div class="col-md-3"> <button type="button" class="btn btn-default btn-circle btn-xl inner-glow">3</button> </div> </div> 

Answer 2

You can use inset on some of your shadows and not others. This will make some of the shadows cast inwards and others outwards. Also, replace your background-color rule with border .

 .btn-circle.btn-xl { width: 140px; height: 140px; padding: 10px 16px; border-radius: 70px; font-size: 24px; line-height: 1.33; } .btn-circle { width: 60px; height: 60px; padding: 6px 0px; border-radius: 30px; text-align: center; font-size: 12px; line-height: 1.42857; } #btn1 { border: 5px solid blue; box-shadow: 0 0 5px blue, /*0 0 10px #fff,*/ 0 0 20px blue inset, 0 0 30px blue inset, 0 0 40px blue, 0 0 55px blue, 0 0 75px blue; } #btn2 { border: 5px solid Red; box-shadow: 0 0 5px red, /*0 0 10px #fff,*/ 0 0 20px red inset, 0 0 30px red inset, 0 0 40px red, 0 0 55px red, 0 0 75px red; } 

 <div class="row" style="padding-top: 50px;"> <div class="col-md-3 offset-md-3"> <button type="button" id="btn1" class="btn btn-default btn-circle btn-xl">1</button> </div> <div class="col-md-3"> <button type="button" id="btn2" class="btn btn-default btn-circle btn-xl">2</button> </div> </div> 

Answer 3

can you check the snippet and here you can find it in

fiddle with SCSS https://jsfiddle.net/ckm1qwgq/

and if you want to make the shadow more you can change the value of the box shadow

example

box-shadow: 0 0 12px 5px #03cafc;

to

box-shadow: 0 0 40px 9px #03cafc;

 .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .item { width: 15rem; height: 15rem; background-color: pink; border-radius: 100%; position: relative; } .item:before { position: absolute; content: ""; width: 100%; height: 100%; display: block; top: 0; left: 0; border-radius: 100%; } .item:first-child { background-color: #03cafc; } .item:first-child:before { box-shadow: 0 0 12px 5px #03cafc; background: #03cafc; } .item:nth-child(2) { background-color: #ff8f4c; } .item:nth-child(2):before { box-shadow: 0 0 12px 5px #ff8f4c; background: #ff8f4c; } .item:nth-child(3) { background-color: #51eca5; } .item:nth-child(3):before { box-shadow: 0 0 12px 5px #51eca5; background: #51eca5; } .item:nth-child(4) { background-color: pink; } .item:nth-child(4):before { box-shadow: 0 0 12px 5px pink; background: pink; } 

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>