Home Web Design CSS CSS Animated Segmented Control With Sliding Effect | Pure CSS3

CSS Animated Segmented Control With Sliding Effect | Pure CSS3

December 13, 2019

3884

How we can create a segmented control using pure CSS? Solution: See this CSS Animated Segmented Control With Sliding Effect, Pure CSS3 Program.

Previously I have shared Tabs related program, but this is about Segmented Control which is a little bit like tabs. Basically, A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. First time this type of segmented control first time introduced by Apple.

Today you will learn to create Pure CSS/CSS3 segmented control design. Basically, there are 2 segmented control bars which 4 items in each bar. By default, there is an active item with a background color and white text. When you will click on another item, then the active effect will change to that item with a sliding animation from previously active item.

So, Today I am sharing CSS Animated Segmented Control With Sliding Effect. There I have used pure CSS for creating the program and its animation effects, you can say the program is completely based on CSS3. There is no JavaScript or any other JS library. You can use it on your website or web app, also you can use this on your website.

If you are thinking now how this segmented control actually is, then see the preview given below.

Preview Of Pure CSS3 Sliding Switch

See this video preview to getting an idea of how this animation looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Animated Segmented Control With Sliding Effect Source Code

Before sharing source code, let’s talk about it. First I have created a main div named container and placed two divs inside it for creating the segmented. Each segmented has 4 items for creating that I have created 4 radio inputs using HTML <input type="radio"> tag and four labels for the inputs. There I have used ID and for method for linking input and labels to each other.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. There CSS codes are in-depth, only an expert can understand this. For creating the sliding animation I have used CSS transition command. And the switch function created using CSS :checked property. There any many more things are based on CSS, I can’t explain all in writing but you will understand after getting the codes.

For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow these steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Segmented Controls | Webdevtrick.com</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  
  <div class="segmented-control">
    <input type="radio" name="sc-1-1" id="sc-1-1-1">
    <input type="radio" name="sc-1-1" id="sc-1-1-2">
    <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>
    <input type="radio" name="sc-1-1" id="sc-1-1-4">

    <label for="sc-1-1-1" data-value="Design">Design</label>
    <label for="sc-1-1-2" data-value="Development">Development</label>
    <label for="sc-1-1-3" data-value="SEO / SMO">SEO / SMO</label>
    <label for="sc-1-1-4" data-value="Graphic">Graphic</label>
  </div>

  <div class="segmented-control">
    <input type="radio" name="sc-1-2" id="sc-1-2-1">
    <input type="radio" name="sc-1-2" id="sc-1-2-2" checked>
    <input type="radio" name="sc-1-2" id="sc-1-2-3">
    <input type="radio" name="sc-1-2" id="sc-1-2-4">

    <label for="sc-1-2-1" data-value="Design">Design</label>
    <label for="sc-1-2-2" data-value="Development">Development</label>
    <label for="sc-1-2-3" data-value="SEO / SMO">SEO / SMO</label>
    <label for="sc-1-2-4" data-value="Graphic">Graphic</label>
  </div>

</div>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Segmented Controls | Webdevtrick.com</title>

</head>

<body>

<label for="sc-1-1-1" data-value="Design">Design</label>

<label for="sc-1-1-2" data-value="Development">Development</label>

<label for="sc-1-1-4" data-value="Graphic">Graphic</label>

</div>

<label for="sc-1-2-1" data-value="Design">Design</label>

<label for="sc-1-2-2" data-value="Development">Development</label>

<label for="sc-1-2-4" data-value="Graphic">Graphic</label>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html {
  font-size: 14px;
  font-family: 'Source Sans Pro', Helvetica, arial, sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  color: #C2C8CD;
  cursor: default;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}
html, body {
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: -webkit-flex;
  display: flex;
}
.container {
  margin: auto;
  max-width: 700px;
  min-width: 200px;
  text-align: center;
  padding: 0 6em;
}
.segmented-control {
  position: relative;
  display: inline-block;
  border: 2px solid currentColor;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  overflow: hidden;
  margin: .8em auto;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -moz-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-tap-highlight-color: transparent;
}
.segmented-control:nth-child(1) {
  width: 100%;
  color: #5cb85c;
}
.segmented-control:nth-child(2) {
  width: 100%;
  color: #ff3838;
}
.segmented-control > input {
  position: absolute;
  left: -10000px;
  opacity: 0;
}
.segmented-control > input[type='checkbox'] ~ label {
  -moz-transition-duration: 0;
  -o-transition-duration: 0;
  -webkit-transition-duration: 0;
  transition-duration: 0;
}
.segmented-control > input[type='checkbox'] ~ label:before {
  opacity: 0;
}
.segmented-control > input:disabled:nth-child(1) ~ label:nth-of-type(1) {
  opacity: 0.3;
  cursor: not-allowed;
}
.segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):before {
  opacity: 1;
}
.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before {
  left: 0%;
}
.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {
  left: 0%;
}
.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {
  left: 0%;
}
.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {
  left: 0%;
}
.segmented-control > input:disabled:nth-child(2) ~ label:nth-of-type(2) {
  opacity: 0.3;
  cursor: not-allowed;
}
.segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):before {
  opacity: 1;
}
.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {
  left: 50%;
}
.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {
  left: 33.33333%;
}
.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {
  left: 25%;
}
.segmented-control > input:disabled:nth-child(3) ~ label:nth-of-type(3) {
  opacity: 0.3;
  cursor: not-allowed;
}
.segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):before {
  opacity: 1;
}
.segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {
  left: 66.66667%;
}
.segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {
  left: 50%;
}
.segmented-control > input:disabled:nth-child(4) ~ label:nth-of-type(4) {
  opacity: 0.3;
  cursor: not-allowed;
}
.segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):before {
  opacity: 1;
}
.segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {
  left: 75%;
}
.segmented-control > label {
  display: inline-block;
  padding: 0 .71em;
  cursor: pointer;
  float: left;
  line-height: 3em;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  -moz-transition-property: none;
  -o-transition-property: none;
  -webkit-transition-property: none;
  transition-property: none;
  -moz-transition-duration: inherit;
  -o-transition-duration: inherit;
  -webkit-transition-duration: inherit;
  transition-duration: inherit;
  -moz-transition-timing-function: inherit;
  -o-transition-timing-function: inherit;
  -webkit-transition-timing-function: inherit;
  transition-timing-function: inherit;
}
.segmented-control > label:before, .segmented-control > label:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.segmented-control > label:after {
  color: white;
  content: attr(data-value);
  text-align: center;
  padding: inherit;
  z-index: 10;
  font-style: inherit;
  text-decoration: inherit;
  font-weight: inherit;
  opacity: 0;
  -moz-transition-property: opacity, left;
  -o-transition-property: opacity, left;
  -webkit-transition-property: opacity, left;
  transition-property: opacity, left;
  -moz-transition-duration: inherit;
  -o-transition-duration: inherit;
  -webkit-transition-duration: inherit;
  transition-duration: inherit;
  -moz-transition-timing-function: inherit;
  -o-transition-timing-function: inherit;
  -webkit-transition-timing-function: inherit;
  transition-timing-function: inherit;
}
.segmented-control > label:after, .segmented-control > label {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.segmented-control > label:before {
  content: '';
  color: inherit;
  background: currentColor;
  -moz-transition-property: left;
  -o-transition-property: left;
  -webkit-transition-property: left;
  transition-property: left;
  -moz-transition-duration: inherit;
  -o-transition-duration: inherit;
  -webkit-transition-duration: inherit;
  transition-duration: inherit;
  -moz-transition-timing-function: inherit;
  -o-transition-timing-function: inherit;
  -webkit-transition-timing-function: inherit;
  transition-timing-function: inherit;
}
.segmented-control > label:first-of-type:nth-last-of-type(1), .segmented-control > label:first-of-type:nth-last-of-type(1):after, .segmented-control > label:first-of-type:nth-last-of-type(1):before, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:before {
  width: 100%;
}
.segmented-control > label:first-of-type:nth-last-of-type(2), .segmented-control > label:first-of-type:nth-last-of-type(2):after, .segmented-control > label:first-of-type:nth-last-of-type(2):before, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:before {
  width: 50%;
}
.segmented-control > label:first-of-type:nth-last-of-type(3), .segmented-control > label:first-of-type:nth-last-of-type(3):after, .segmented-control > label:first-of-type:nth-last-of-type(3):before, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:before {
  width: 33.33333%;
}
.segmented-control > label:first-of-type:nth-last-of-type(4), .segmented-control > label:first-of-type:nth-last-of-type(4):after, .segmented-control > label:first-of-type:nth-last-of-type(4):before, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:before {
  width: 25%;
}
.segmented-control.italic, .segmented-control .italic {
  font-style: italic;
}
.segmented-control.bold, .segmented-control .bold {
  font-weight: bold;
}
.segmented-control.underline, .segmented-control .underline {
  text-decoration: underline;
}
.segmented-control.line-through, .segmented-control .line-through {
  text-decoration: line-through;
}

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html {

font-size: 14px;

font-family: 'Source Sans Pro', Helvetica, arial, sans-serif;

font-weight: 400;

letter-spacing: .04em;

color: #C2C8CD;

cursor: default;

font-smooth: always;

-webkit-font-smoothing: antialiased;

}

html, body {

min-height: 100%;

height: 100%;

padding: 0;

margin: 0;

}

body {

display: -webkit-flex;

display: flex;

}

.container {

margin: auto;

max-width: 700px;

min-width: 200px;

text-align: center;

padding: 0 6em;

}

.segmented-control {

position: relative;

display: inline-block;

border: 2px solid currentColor;

font-style: normal;

font-weight: normal;

text-decoration: none;

overflow: hidden;

margin: .8em auto;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

-moz-user-select: -moz-none;

-ms-user-select: none;

-webkit-user-select: none;

user-select: none;

-moz-transition-duration: 0.8s;

-o-transition-duration: 0.8s;

-webkit-transition-duration: 0.8s;

transition-duration: 0.8s;

-moz-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

-o-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

-webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

-webkit-tap-highlight-color: transparent;

}

.segmented-control:nth-child(1) {

width: 100%;

color: #5cb85c;

}

.segmented-control:nth-child(2) {

width: 100%;

color: #ff3838;

}

.segmented-control > input {

position: absolute;

left: -10000px;

opacity: 0;

}

.segmented-control > input[type='checkbox'] ~ label {

-moz-transition-duration: 0;

-o-transition-duration: 0;

-webkit-transition-duration: 0;

transition-duration: 0;

}

.segmented-control > input[type='checkbox'] ~ label:before {

opacity: 0;

}

.segmented-control > input:disabled:nth-child(1) ~ label:nth-of-type(1) {

opacity: 0.3;

cursor: not-allowed;

}

.segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):before {

opacity: 1;

}

.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before {

left: 0%;

}

.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {

left: 0%;

}

.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {

left: 0%;

}

.segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {

left: 0%;

}

.segmented-control > input:disabled:nth-child(2) ~ label:nth-of-type(2) {

opacity: 0.3;

cursor: not-allowed;

}

.segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):before {

opacity: 1;

}

.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {

left: 50%;

}

.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {

left: 33.33333%;

}

.segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {

left: 25%;

}

.segmented-control > input:disabled:nth-child(3) ~ label:nth-of-type(3) {

opacity: 0.3;

cursor: not-allowed;

}

.segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):before {

opacity: 1;

}

.segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before {

left: 66.66667%;

}

.segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {

left: 50%;

}

.segmented-control > input:disabled:nth-child(4) ~ label:nth-of-type(4) {

opacity: 0.3;

cursor: not-allowed;

}

.segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):before {

opacity: 1;

}

.segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before {

left: 75%;

}

.segmented-control > label {

display: inline-block;

padding: 0 .71em;

cursor: pointer;

float: left;

line-height: 3em;

font-style: inherit;

font-weight: inherit;

text-decoration: inherit;

-moz-transition-property: none;

-o-transition-property: none;

-webkit-transition-property: none;

transition-property: none;

-moz-transition-duration: inherit;

-o-transition-duration: inherit;

-webkit-transition-duration: inherit;

transition-duration: inherit;

-moz-transition-timing-function: inherit;

-o-transition-timing-function: inherit;

-webkit-transition-timing-function: inherit;

transition-timing-function: inherit;

}

.segmented-control > label:before, .segmented-control > label:after {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

.segmented-control > label:after {

color: white;

content: attr(data-value);

text-align: center;

padding: inherit;

z-index: 10;

font-style: inherit;

text-decoration: inherit;

font-weight: inherit;

opacity: 0;

-moz-transition-property: opacity, left;

-o-transition-property: opacity, left;

-webkit-transition-property: opacity, left;

transition-property: opacity, left;

-moz-transition-duration: inherit;

-o-transition-duration: inherit;

-webkit-transition-duration: inherit;

transition-duration: inherit;

-moz-transition-timing-function: inherit;

-o-transition-timing-function: inherit;

-webkit-transition-timing-function: inherit;

transition-timing-function: inherit;

}

.segmented-control > label:after, .segmented-control > label {

text-align: center;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.segmented-control > label:before {

content: '';

color: inherit;

background: currentColor;

-moz-transition-property: left;

-o-transition-property: left;

-webkit-transition-property: left;

transition-property: left;

-moz-transition-duration: inherit;

-o-transition-duration: inherit;

-webkit-transition-duration: inherit;

transition-duration: inherit;

-moz-transition-timing-function: inherit;

-o-transition-timing-function: inherit;

-webkit-transition-timing-function: inherit;

transition-timing-function: inherit;

}

.segmented-control > label:first-of-type:nth-last-of-type(1), .segmented-control > label:first-of-type:nth-last-of-type(1):after, .segmented-control > label:first-of-type:nth-last-of-type(1):before, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:before {

width: 100%;

}

.segmented-control > label:first-of-type:nth-last-of-type(2), .segmented-control > label:first-of-type:nth-last-of-type(2):after, .segmented-control > label:first-of-type:nth-last-of-type(2):before, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:before {

width: 50%;

}

.segmented-control > label:first-of-type:nth-last-of-type(3), .segmented-control > label:first-of-type:nth-last-of-type(3):after, .segmented-control > label:first-of-type:nth-last-of-type(3):before, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:before {

width: 33.33333%;

}

.segmented-control > label:first-of-type:nth-last-of-type(4), .segmented-control > label:first-of-type:nth-last-of-type(4):after, .segmented-control > label:first-of-type:nth-last-of-type(4):before, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:before {

width: 25%;

}

.segmented-control.italic, .segmented-control .italic {

font-style: italic;

}

.segmented-control.bold, .segmented-control .bold {

font-weight: bold;

}

.segmented-control.underline, .segmented-control .underline {

text-decoration: underline;

}

.segmented-control.line-through, .segmented-control .line-through {

text-decoration: line-through;

}

That’s It. Now you have successfully created CSS Animated Segmented Control With Sliding Effect, Pure CSS3 Program. If you have any doubt or question then comment down below.

Thanks For Visiting, Keep Visiting.

CSS Animated Segmented Control With Sliding Effect | Pure CSS3

Preview Of Pure CSS3 Sliding Switch

CSS Animated Segmented Control With Sliding Effect Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY