3D Selection Box

Written by @kerixa 13 May 2020

Like on/off buttons, selection boxes can be 3D. When you click on them they go inside and when you turn them off, they return back outside. This effects will make the selections more realistic!

Code Snippet:

                                                
                                                <!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #202020;
  font-family: 'Source Sans Pro', sans-serif;
}

.buttons-container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 395px;
  height: 100px;
  border-radius: 45px;
  background: #151515;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
}

ul {
  list-style: none;
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  height: 90px;
  width: 95px;
  background: #202020;
  border-top: 1px solid #353535;
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.5);
  transition: all .5s;
}
ul li:nth-of-type(1) {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
ul li:last-of-type {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
ul li:hover {
  cursor: pointer;
}
ul li a {
  display: inline-block;
  color: gray;
  text-decoration: none;
  font-size: 40px;
  transition: all .5s;
}

.created-by {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 10%;
  width: 200px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}
.created-by p {
  color: white;
}
.created-by a {
  color: crimson;
  text-shadow: 0 0 15px rgba(244, 0, 0, 0.71);
  text-decoration: none;
  font-weight: 700;
}
.created-by a:hover {
  text-decoration: underline;
}

.active {
  background: #151515;
  border-top: none;
  border-bottom: 1px solid #252525;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.8);
}

.active-text {
  color: crimson;
  text-shadow: 0 0 15px rgba(220, 10, 10, 0.5);
}
</style>
<div class="buttons-container">
<ul>
<li class="active"><a href="#" class="active-text"><i class="fa fa-codepen" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-coffee" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-rocket" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i></a></li>
</ul>
</div>

<script>
const lis = document.querySelectorAll("li");
const a = document.querySelectorAll("li a");

for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function() {
    for (let i = 0; i < lis.length; i++) {
      lis[i].classList.remove("active");
      a[i].classList.remove("active-text");
    }
    this.classList.add("active");
    a[i].classList.add("active-text");
  });
}
</script><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Shahmeer, coolcoco7, SmitaPatil25, owoboycute, 092010
advertisement 2