search

Home >Web Front-end >JS Tutorial >Toggle Switch Realistic illusion using the core html and core Css Code

Toggle Switch Realistic illusion using the core html and core Css Code

Patricia Arquette
Patricia ArquetteOriginal
2024-12-05 19:12:10765browse

Toggle Switch Realistic illusion using the core html and core Css Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Glass Cards</title>
  <style>
.switch {
  position: relative;
  width: 210px;
  height: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 3px;
  background: #0d0d0d;
  border-radius: 6px;
  -webkit-box-shadow:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.switch input[type="checkbox"]   label {
  position: relative;
  display: block;
  left: 0;
  width: 50%;
  height: 100%;
  background: #1b1c1c;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"]   label:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 10px;
  background: #fff;
  border-radius: 50%;
  vertical-align: middle;
  -webkit-box-shadow:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  box-shadow:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"]   label:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.switch input[type="checkbox"]   label i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 24px;
  margin-top: -12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"]   label i:before,
.switch input[type="checkbox"]   label i:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"]   label i:before {
  left: -7px;
}
.switch input[type="checkbox"]   label i:after {
  left: 7px;
}
.switch input[type="checkbox"]:checked   label {
  left: 50%;
}
.switch input[type="checkbox"]:checked   label:before {
  -webkit-box-shadow:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
  box-shadow:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
}</style>
</head>
<body>
  <div>

The above is the detailed content of Toggle Switch Realistic illusion using the core html and core Css Code. For more information, please follow other related articles on the PHP Chinese website!

css html webkit switch checkbox using pointer display position margin padding border viewport background transition input
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How Effective is a Simple JavaScript Function for Preloading Images in Modern Browsers?Next article：How Effective is a Simple JavaScript Function for Preloading Images in Modern Browsers?

Related articles

See more