custom widgets

custom buttons and widgets

by Abdul Ahmad

HTML

<div class='box'>
  <div class='close-box'>
    <div class='close-icon'>
      x
    </div>
    <div class='vertical-mid-hack'></div>
  </div>
  <div class='circle'></div>
</div>

<div class='line-break'>

</div>

<div class='button-box'>
  <div class='button-background'>
  
  </div>
  <button>
    Click Me
  <button>
</div>

CSS

.line-break {
  padding: 10px;
}

.box {
  width: 30px;
  height: 30px;
  position: relative;
  font-family: arial;
  color: gray;
  -webkit-transition: color 0.15s linear;
  -webkit-transform:translate3d(0,0,0);
}
.circle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100%;
  width: 94%;
  height: 94%;
  border: 1px solid black;
  -webkit-transform: scale(1.3, 1.3);
  opacity: 0;
  -webkit-transition: transform 0.15s linear, opacity 0.15s linear;
}
.box:hover {
  cursor: pointer;
  color: black;
  -webkit-transition: color 0.15s linear;
}
.box:hover .circle {
  opacity: 1;
  -webkit-transform: scale(0.9, 0.9);
  -webkit-transition: transform 0.15s linear, opacity 0.15s linear;
}
.close-box {
  width: 100%;
  height: 100%;
  text-align: center;
}
.close-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 2px -2px 0 1px;
  font-size: 20px;
  transition: transform 0.15s linear;
}
.vertical-mid-hack {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin: 0 -2px;
  width: 1px;
}

.box:hover .close-icon {
  -webkit-transform: rotate(90deg) scale(0.8, 0.8);
  transition: transform 0.15s linear;
}

.button-box {
  width: 100px;
  height: 40px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  font-family: arial;
}

button {
  border: 1px solid gray;
  background-color: transparent;
  color: gray;
  width: 100%;
  height: 100%;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-radius: 3px;
  -webkit-transition: border-color 0.15s linear, color 0.15s linear;
}
.button-background {
  width: 0;
  height: 100%;
  background-color: teal;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transition: width 0.15s linear, background-color 0.15s linear;
}
.button-box:hover button {
  cursor: pointer;
  border-color: teal;
  color: teal;
  -webkit-transition: border-color 0.1s linear, color 0.1s linear;
}
.button-box:active button {
  color: white;
  -webkit-transition: color 0.15s...