how to create Toggle Switch or Toggle Buttons using pure CSS?

Toggle Switch
In this tutorial, we learn, how to create Toggle Buttons using pure CSS?
I hope you will aware of a toggle button, if you don’t know let me explain, a toggle button allows to user to change a setting between two states, toggle buttons are called also switch buttons, you can add in your layout basic toggle button with the ToggleButton object. its provide a slider control, which you can add with a Switch object.

therefore, today I am sharing how to create toggle buttons using pure CSS? learn and create a “toggle switch” (on/off button) with CSS.

this program will be created with custom pure CSS and HTML, toggle switch style inspiration with HTML and CSS code, this program is a simple toggle switch with bounce animation after you switch the toggle on/off.

I have used HTML and CSS to create Switch, I have created a checkbox with the label, so, we will change the label as the switch and turn on, the switch once, when I will checkbox checked, and turn off, when I will checkbox unchecked.

To create this program for styling I have used bootstrap file, CSS and HTML for designing the UI style. I hope you will see toggle switch on multiple websites, but this toggle switch has a stylish and attractive design.

for preview, the live demo clicks on the given below view demo buttons. I hope you will like this program.

Explanation of Source Code For Toggle Buttons or Toggle Switch using HTML and Pure CSS

let’s discuss the source code which I have used to create a toggle buttons program, First I have used Bootstrap file (get) for creating UI design, such as col-md-12, col-md-6, etc. after that, I have used ID "main" for heading styling.

therefore, I have used class .toggle-switch with some CSS properties width: 145px; height: 74px; position: relative; border-radius: 40px; margin: 0 auto;

therefore, I have used class .toggle-switch with some CSS properties width: 145px; height: 74px; position: relative; border-radius: 40px; margin: 0 auto; and also create input checkbox.

In this program, I have used four toggle switch or toggle buttons, which have different UI design, you can see in the preview on the click on view demo button. For creating four toggle buttons taken for different ID such as #toggle-switch-first span, #toggle-switch-second span, #toggle-switch-third span, #toggle-switch-fourth span

therefore, I have used the same color UI design, but if you want on the switch on/off you can change the color as you want, this program created with pure CSS there is no need for Javascript or jQuery.

Furthermore, if you see in the stylesheet I have used CSS properties to create this program such as background, color, transition, transform, border, border-radius, content, box-shadow, etc.

everything here I can’ not explain in writing, I hope you will understand, when you get the source code then you can understand in a better way, you can use this program after few changes in the code, I hope you will enjoy this program and used this program when you need.

therefore, to create this program I have used Two files such as the First file for “HTML” and the Second file for “CSS”. see the given below source code and follow as given, used it after a few changes, enjoy it.

First Step: Create HTML File as name “index.html” | Change filename as you want

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
    <div class="col-md-12">
    <h1><u><span id="main">Stylish Design Toggle buttons/Toggle Switch</span></u></h1>
    
        <div class="col-md-6 colboxes">
        <div class="toggle-switch" id="toggle-switch-first">
            <input type="checkbox">
            <span></span>
        </div>
        </div>

        <div class="col-md-6 colboxes">
        <div class="toggle-switch" id="toggle-switch-second">
            <input type="checkbox">
            <span></span>
        </div>
        </div>

        <div class="col-md-6 colboxes">
        <div class="toggle-switch" id="toggle-switch-third">
            <input type="checkbox">
            <span></span>
        </div>
        </div>

        <div class="col-md-6 colboxes">
        <div class="toggle-switch" id="toggle-switch-fourth">
            <input type="checkbox">
            <span></span>
        </div>
        </div>
    
    </div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1><u><span id="main">Stylish Design Toggle buttons/Toggle Switch</span></u></h1>

</div>

</div>

</div>

</div>

</body>

</html>

Second Step: Create CSS file as name “stylesheet.css” | Change filename as You want

body {
    background-color: #f8f8f8;
    margin: 0px;
}
h1 {
    font-family:sans-serif;
    line-height: 22px;
    text-align: center;
    margin: 10px 0px;
    padding-bottom: 23px;   
}
#main {
    font-weight: 800;
    font-size: 26px;
    color: #909291;
}

.colboxes{
    margin-bottom: 7%;
}

.toggle-switch {
    width: 145px;
    height: 74px;
    position: relative;
    border-radius: 40px;
    margin: 0 auto;  
}
input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    opacity: 0;
    z-index: 2;
    cursor: pointer; 
}

/* First toggle switch */

#toggle-switch-first span {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 1;
    box-shadow: 0px 2px 25px #d9d9d9;
    transition: 0.2s ease background-color, 0.2s ease opacity;
    border-radius: 40px;
}
#toggle-switch-first span:before, #toggle-switch-first span:after {
    content: '';
    border-radius: 50%;
    top: 8px;
    width: 58px;
    height: 58px;
    position: absolute;
    transition: 0.5s ease transform, 0.2s ease background-color;
}
#toggle-switch-first span:before {
    transform: translate(-58px, 0px);
    background-color: #fff;
    z-index: 1;
}
#toggle-switch-first span:after {
    transform: translate(8px, 0px);
    background-color: #17ea1e;
    z-index: 0;
}
#toggle-switch-first input[type="checkbox"]:checked+span {
    background-color: #17ea1e;
}
#toggle-switch-first input[type="checkbox"]:active+span {
    opacity: 0.5;
}
#toggle-switch-first input[type="checkbox"]:checked+span:before {
    transform: translate(79px, 0px);
    background-color: #fff;
}
#toggle-switch-first input[type="checkbox"]:checked+span:after {
    transform: translate(79px, 0px);
     background-color: #fff;
}

/* First toggle switch completed */

/* Start Second toggle switch */

#toggle-switch-second span {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: 8px solid #17ea1e;
    border-color: #17ea1e;
    overflow: hidden;
    background-color: #fff;
    border-radius: 40px;
    transition: 0.8s ease border-color;
}
#toggle-switch-second span:before {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    border-width: 9px;
    border-style: solid;
    border-color: #17ea1e;
    margin-left: 8px;
    border-radius: 50%;
    transform: translate(-8px, 0px);
    transition: 0.4s ease border-radius, 0.4s ease transform, 0.6s ease width, 0.6s ease margin-left, 0.8s ease border-color;
}
#toggle-switch-second input[type="checkbox"]:active+span:before {
    width: 80px;
    border-radius: 40px;
}
#toggle-switch-second input[type="checkbox"]:checked:active+span:before {
    margin-left: 0px;
}
#toggle-switch-second input[type="checkbox"]:checked+span {
    border-color: #17ea1e;
}
#toggle-switch-second input[type="checkbox"]:checked+span:before {
    border-color: #17ea1e;
    transform: translate(63px, 0px);
}

/* Second toggle switch completed */

/* Start Third toggle switch */

#toggle-switch-third span {
    display: block;
    width: 145px;
    height: 38px;
    background-color: #17ea1e;
    border-radius: 20px;
    transition: 0.5s ease background-color;
}
#toggle-switch-third span:before {
    content: '';
    position: absolute;
    top: -16px;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 2px 6px 25px #d7d7d7;
    transform: translate(0px, 0px);
    transition: 0.6s ease transform, 0.6s box-shadow;
}
#toggle-switch-third span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    left: 35px;
    width: 0px;
    height: 24px;
    margin-top: -31px;
    margin-left: 0px;
    border: 6px solid #17ea1e;
    border-radius: 20px;
    transform: translate(-6px, 0px);
    transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;
}
#toggle-switch-third input[type="checkbox"]:checked+span:before {
    box-shadow: 7px 6px 25px #e6e6e6;
    transform: translate(75px, 0px);
}
#toggle-switch-third input[type="checkbox"]:checked+span:after {
    width: 24px;
    border-radius: 50%;
    transform: translate(64px, 0px);
}
#toggle-switch-third input[type="checkbox"]:checked+span {
    background-color: #17ea1e;
}
/* Start Fourth toggle switch */

#toggle-switch-fourth span {
    display: block;
    width: 145px;
    height: 38px;
    background-color: #17ea1e;
    transition: 0.5s ease background-color;
}
#toggle-switch-fourth span:before {
    content: '';
    position: absolute;
    top: -16px;
    width: 70px;
    height: 70px;
    background-color: #fff;
    box-shadow: 2px 6px 25px #17ea1e;
    transform: translate(0px, 0px);
    transition: 0.6s ease transform, 0.6s box-shadow;
}
#toggle-switch-fourth span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    left: 35px;
    width: 0px;
    height: 24px;
    margin-top: -36px;
    margin-left: -6px;
    border: 6px solid #17ea1e;
    transform: translate(0px, 0px);
    transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;
}
#toggle-switch-fourth input[type="checkbox"]:checked+span:before {
    box-shadow: 7px 6px 25px #e6e6e6;
    transform: translate(75px, 0px);
}
#toggle-switch-fourth input[type="checkbox"]:checked+span:after {
    width: 24px;
    border-radius: 50%;
    transform: translate(64px, 0px);
}
#toggle-switch-fourth input[type="checkbox"]:checked+span {
    background-color: #17ea1e;
}
#toggle-switch-fourth span {
    display: block;
    width: 145px;
    height: 38px;
    background-color: #17ea1e;
    transition: 0.5s ease background-color;
}
#toggle-switch-fourth span:before {
    content: '';
    position: absolute;
    top: -12px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    box-shadow: 2px 6px 25px #d7d7d7;
    transform: translate(0px, 0px);
    transition: 0.6s ease transform, 0.6s box-shadow;
}
#toggle-switch-fourth span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    left: 35px;
    width: 25px;
    height: 25px;
    margin-top: -32px;
    margin-left: -17px;
    border: 6px solid #17ea1e;
    border-radius: 20px;
    transform: translate(0px, 0px);
    transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;
}
#toggle-switch-fourth input[type="checkbox"]:checked+span:before {
    box-shadow: 7px 6px 25px #e6e6e6;
    transform: translate(87px, 0px);
}
#toggle-switch-fourth input[type="checkbox"]:checked+span:after {
    width: 24px;
    border-radius: 50%;
    transform: translate(87px, 0px);
}
#toggle-switch-fourth input[type="checkbox"]:checked+span {
    background-color: #17ea1e;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

body {

background-color: #f8f8f8;

margin: 0px;

}

h1 {

font-family:sans-serif;

line-height: 22px;

text-align: center;

margin: 10px 0px;

padding-bottom: 23px;

}

#main {

font-weight: 800;

font-size: 26px;

color: #909291;

}

.colboxes{

margin-bottom: 7%;

}

.toggle-switch {

width: 145px;

height: 74px;

position: relative;

border-radius: 40px;

margin: 0 auto;

}

input[type="checkbox"] {

position: absolute;

width: 100%;

height: 100%;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

margin: 0px;

opacity: 0;

z-index: 2;

cursor: pointer;

}

/* First toggle switch */

#toggle-switch-first span {

position: absolute;

overflow: hidden;

background-color: #fff;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

opacity: 1;

box-shadow: 0px 2px 25px #d9d9d9;

transition: 0.2s ease background-color, 0.2s ease opacity;

border-radius: 40px;

}

#toggle-switch-first span:before, #toggle-switch-first span:after {

content: '';

border-radius: 50%;

top: 8px;

width: 58px;

height: 58px;

position: absolute;

transition: 0.5s ease transform, 0.2s ease background-color;

}

#toggle-switch-first span:before {

transform: translate(-58px, 0px);

background-color: #fff;

z-index: 1;

}

#toggle-switch-first span:after {

transform: translate(8px, 0px);

background-color: #17ea1e;

z-index: 0;

}

#toggle-switch-first input[type="checkbox"]:checked+span {

background-color: #17ea1e;

}

#toggle-switch-first input[type="checkbox"]:active+span {

opacity: 0.5;

}

#toggle-switch-first input[type="checkbox"]:checked+span:before {

transform: translate(79px, 0px);

background-color: #fff;

}

#toggle-switch-first input[type="checkbox"]:checked+span:after {

transform: translate(79px, 0px);

background-color: #fff;

}

/* First toggle switch completed */

/* Start Second toggle switch */

#toggle-switch-second span {

position: absolute;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

border: 8px solid #17ea1e;

border-color: #17ea1e;

overflow: hidden;

background-color: #fff;

border-radius: 40px;

transition: 0.8s ease border-color;

}

#toggle-switch-second span:before {

content: '';

position: absolute;

width: 58px;

height: 58px;

border-width: 9px;

border-style: solid;

border-color: #17ea1e;

margin-left: 8px;

border-radius: 50%;

transform: translate(-8px, 0px);

transition: 0.4s ease border-radius, 0.4s ease transform, 0.6s ease width, 0.6s ease margin-left, 0.8s ease border-color;

}

#toggle-switch-second input[type="checkbox"]:active+span:before {

width: 80px;

border-radius: 40px;

}

#toggle-switch-second input[type="checkbox"]:checked:active+span:before {

margin-left: 0px;

}

#toggle-switch-second input[type="checkbox"]:checked+span {

border-color: #17ea1e;

}

#toggle-switch-second input[type="checkbox"]:checked+span:before {

border-color: #17ea1e;

transform: translate(63px, 0px);

}

/* Second toggle switch completed */

/* Start Third toggle switch */

#toggle-switch-third span {

display: block;

width: 145px;

height: 38px;

background-color: #17ea1e;

border-radius: 20px;

transition: 0.5s ease background-color;

}

#toggle-switch-third span:before {

content: '';

position: absolute;

top: -16px;

width: 70px;

height: 70px;

background-color: #fff;

border-radius: 50%;

box-shadow: 2px 6px 25px #d7d7d7;

transform: translate(0px, 0px);

transition: 0.6s ease transform, 0.6s box-shadow;

}

#toggle-switch-third span:after {

content: '';

position: absolute;

top: 50%;

right: 0px;

left: 35px;

width: 0px;

height: 24px;

margin-top: -31px;

margin-left: 0px;

border: 6px solid #17ea1e;

border-radius: 20px;

transform: translate(-6px, 0px);

transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;

}

#toggle-switch-third input[type="checkbox"]:checked+span:before {

box-shadow: 7px 6px 25px #e6e6e6;

transform: translate(75px, 0px);

}

#toggle-switch-third input[type="checkbox"]:checked+span:after {

width: 24px;

border-radius: 50%;

transform: translate(64px, 0px);

}

#toggle-switch-third input[type="checkbox"]:checked+span {

background-color: #17ea1e;

}

/* Start Fourth toggle switch */

#toggle-switch-fourth span {

display: block;

width: 145px;

height: 38px;

background-color: #17ea1e;

transition: 0.5s ease background-color;

}

#toggle-switch-fourth span:before {

content: '';

position: absolute;

top: -16px;

width: 70px;

height: 70px;

background-color: #fff;

box-shadow: 2px 6px 25px #17ea1e;

transform: translate(0px, 0px);

transition: 0.6s ease transform, 0.6s box-shadow;

}

#toggle-switch-fourth span:after {

content: '';

position: absolute;

top: 50%;

right: 0px;

left: 35px;

width: 0px;

height: 24px;

margin-top: -36px;

margin-left: -6px;

border: 6px solid #17ea1e;

transform: translate(0px, 0px);

transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;

}

#toggle-switch-fourth input[type="checkbox"]:checked+span:before {

box-shadow: 7px 6px 25px #e6e6e6;

transform: translate(75px, 0px);

}

#toggle-switch-fourth input[type="checkbox"]:checked+span:after {

width: 24px;

border-radius: 50%;

transform: translate(64px, 0px);

}

#toggle-switch-fourth input[type="checkbox"]:checked+span {

background-color: #17ea1e;

}

#toggle-switch-fourth span {

display: block;

width: 145px;

height: 38px;

background-color: #17ea1e;

transition: 0.5s ease background-color;

}

#toggle-switch-fourth span:before {

content: '';

position: absolute;

top: -12px;

width: 60px;

height: 60px;

background-color: #fff;

box-shadow: 2px 6px 25px #d7d7d7;

transform: translate(0px, 0px);

transition: 0.6s ease transform, 0.6s box-shadow;

}

#toggle-switch-fourth span:after {

content: '';

position: absolute;

top: 50%;

right: 0px;

left: 35px;

width: 25px;

height: 25px;

margin-top: -32px;

margin-left: -17px;

border: 6px solid #17ea1e;

border-radius: 20px;

transform: translate(0px, 0px);

transition: 0.4s ease width, 0.4s ease border-radius, 0.62s ease transform;

}

#toggle-switch-fourth input[type="checkbox"]:checked+span:before {

box-shadow: 7px 6px 25px #e6e6e6;

transform: translate(87px, 0px);

}

#toggle-switch-fourth input[type="checkbox"]:checked+span:after {

width: 24px;

border-radius: 50%;

transform: translate(87px, 0px);

}

#toggle-switch-fourth input[type="checkbox"]:checked+span {

background-color: #17ea1e;

}

Therefore, see the code segment on how to create Toggle Buttons using pure CSS? you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.

how to create Toggle Switch or Toggle Buttons using pure CSS?

Explanation of Source Code For Toggle Buttons or Toggle Switch using HTML and Pure CSS

First Step: Create HTML File as name “index.html” | Change filename as you want

Second Step: Create CSS file as name “stylesheet.css” | Change filename as You want

Related Posts

About Author

admin