Pure CSS custom checkboxes

css3transition

6 years ago

I am here in this post with a beautiful custom checkbox with keyframes animation. As we knows today website are highly customized with advance CSS weather with the help of pseudo elements or some advance CSS properties and attributes like keyframes, transition and transform properties. These properties as highly supportive to cross-browser.

Here you will get how to use keyframes and how to use transition and transform CSS3 properties to get best effect that will enhance the beauty of your website and web application. As we know default checkbox and radio buttons are very old fashion in design in compare to latest trend as going. So customization of these default radio and checkbox input types with beauty without losing its light weight working and function with cross browser usability is a challenging task.

Don’t worry stay update with us get the best custom checkbox with 100% working cross-browser working keep in mind.

Lets take a quick look what I am covering in this Pure CSS custom checkboxes :

keyframes
transform
animation
transition

As you can see in above we are covering css3 properties in this custom checkbox animation.

Let’s code this Animated checkbox using CSS3 Properties:

HTML :

XHTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Checkmark Animation, Custom Chechbox Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="center">
  <label class="label">
    <input  class="label__checkbox_animation" type="checkbox" />
    <span class="label__text_animation">
      <span class="label__check_animation">
        <i class="fa fa-check icon"></i>
      </span>
    </span>
  </label>
</div>
  
  
</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>Checkmark Animation, Custom Chechbox Animation</title>

</head>

<body>

</span>

</label>

</div>

</body>

</html>

CSS Code :

CSS

body,
html {
  font-family: 'Lato', monospace;
  font-size: calc(1rem + 1vw);
}
body{
  background: url("https://www.domfamilydentistry.com/wp-content/uploads/2015/11/bigstock-Abstract-defocused-blurred-bac-103020161.jpg");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}
.label__checkbox_animation {
  display: none;
}
.label__check_animation {
  display: inline-block;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.1);
  background: white;
  vertical-align: middle;
  margin-right: 20px;
  width: 6em;
  height: 6em;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: border .3s ease;
  transition: border .3s ease;
}
.label__check_animation i.icon {
  opacity: 0.2;
  font-size: 129px;
  color: transparent;
  -webkit-transition: opacity .3s .1s ease;
  transition: opacity .5s .3s ease;
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.5);
}
.label__check_animation:hover {
  border: 5px solid rgba(0, 0, 0, 0.2);
}
.label__checkbox_animation:checked + .label__text_animation .label__check_animation {
  -webkit-animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;
  animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;
}
.label__checkbox_animation:checked + .label__text_animation .label__check_animation .icon {
  opacity: 1;
  -webkit-transform: scale(0);
  transform: scale(0);
  color: white;
  -webkit-text-stroke: 0;
  -webkit-animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
  animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@-webkit-keyframes icon {
  from {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes icon {
  from {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes check {
  0% {
    width: 6.5em;
    height: 6.5em;
    border-width: 5px;
    transition: all 0.5s ease;
  }
  10% {
    width: 3.5em;
    height: 3.5em;
    opacity: 0.1;
    background: rgba(0, 0, 0, 0.2);
    border-width: 15px;
    transition: all 0.5s ease;
  }
  30% {
    width: 2.5em;
    height: 2.5em;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.1);
    border-width: 0;
    transition: all 0.5s ease;
  }
  50% {
    width: 4em;
    height: 4em;
    background: #00d478;
    border: 0;
    opacity: 0.6;
    transition: all 0.5s ease;
  }
  100% {
    width: 6em;
    height: 6em;
    background: #00d478;
    border: 0;
    opacity: 1;
    transition: all 1s ease;
  }
}
@keyframes check {
  0% {
    width: 6.5em;
    height: 6.5em;
    border-width: 5px;
    transition: all 0.5s ease;
  }
  10% {
    width: 3.5em;
    height: 3.5em;
    opacity: 0.1;
    background: rgba(0, 0, 0, 0.2);
    border-width: 15px;
    transition: all 0.5s ease;
  }
  30% {
    width: 2.5em;
    height: 2.5em;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.1);
    border-width: 0;
    transition: all 0.5s ease;
  }
  50% {
    width: 4em;
    height: 4em;
    background: #00d478;
    border: 0;
    opacity: 0.6;
    transition: all 0.5s ease;
  }
  100% {
    width: 6em;
    height: 6em;
    background: #00d478;
    border: 0;
    opacity: 1;
    transition: all 1s ease;
  }
}

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

body,

html {

font-family: 'Lato', monospace;

font-size: calc(1rem + 1vw);

}

body{

background: url("https://www.domfamilydentistry.com/wp-content/uploads/2015/11/bigstock-Abstract-defocused-blurred-bac-103020161.jpg");

background-repeat: no-repeat;

background-position: top left;

background-size: 100%;

}

.label__checkbox_animation {

display: none;

}

.label__check_animation {

display: inline-block;

border-radius: 50%;

border: 5px solid rgba(0, 0, 0, 0.1);

background: white;

vertical-align: middle;

margin-right: 20px;

width: 6em;

height: 6em;

cursor: pointer;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-transition: border .3s ease;

transition: border .3s ease;

}

.label__check_animation i.icon {

opacity: 0.2;

font-size: 129px;

color: transparent;

-webkit-transition: opacity .3s .1s ease;

transition: opacity .5s .3s ease;

-webkit-text-stroke: 3px rgba(0, 0, 0, 0.5);

}

.label__check_animation:hover {

border: 5px solid rgba(0, 0, 0, 0.2);

}

.label__checkbox_animation:checked + .label__text_animation .label__check_animation {

-webkit-animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;

animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards;

}

.label__checkbox_animation:checked + .label__text_animation .label__check_animation .icon {

opacity: 1;

-webkit-transform: scale(0);

transform: scale(0);

color: white;

-webkit-text-stroke: 0;

-webkit-animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;

animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;

}

.center {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

@-webkit-keyframes icon {

from {

opacity: 0;

-webkit-transform: scale(0.3);

transform: scale(0.3);

}

to {

opacity: 1;

-webkit-transform: scale(1);

transform: scale(1);

}

@keyframes icon {

from {

opacity: 0;

-webkit-transform: scale(0.3);

transform: scale(0.3);

}

to {

opacity: 1;

-webkit-transform: scale(1);

transform: scale(1);

}

@-webkit-keyframes check {

0% {

width: 6.5em;

height: 6.5em;

border-width: 5px;

transition: all 0.5s ease;

}

10% {

width: 3.5em;

height: 3.5em;

opacity: 0.1;

background: rgba(0, 0, 0, 0.2);

border-width: 15px;

transition: all 0.5s ease;

}

30% {

width: 2.5em;

height: 2.5em;

opacity: 0.4;

background: rgba(0, 0, 0, 0.1);

border-width: 0;

transition: all 0.5s ease;

}

50% {

width: 4em;

height: 4em;

background: #00d478;

border: 0;

opacity: 0.6;

transition: all 0.5s ease;

}

100% {

width: 6em;

height: 6em;

background: #00d478;

border: 0;

opacity: 1;

transition: all 1s ease;

}

@keyframes check {

0% {

width: 6.5em;

height: 6.5em;

border-width: 5px;

transition: all 0.5s ease;

}

10% {

width: 3.5em;

height: 3.5em;

opacity: 0.1;

background: rgba(0, 0, 0, 0.2);

border-width: 15px;

transition: all 0.5s ease;

}

30% {

width: 2.5em;

height: 2.5em;

opacity: 0.4;

background: rgba(0, 0, 0, 0.1);

border-width: 0;

transition: all 0.5s ease;

}

50% {

width: 4em;

height: 4em;

background: #00d478;

border: 0;

opacity: 0.6;

transition: all 0.5s ease;

}

100% {

width: 6em;

height: 6em;

background: #00d478;

border: 0;

opacity: 1;

transition: all 1s ease;

}

Demo

Download

Categories: CSS, html

Tags: bootstrap custom checkbox, checkbox css style examples, css checkbox generator, custom checkbox bootstrap 4, custom checkbox codepen, custom checkbox css tricks, custom checkbox input using css, custom checkbox without label, Custom checkboxes with CSS only, How to Customize Checkbox, Pretty checkbox, Pure CSS custom checkboxes, simple checkbox css, simple checkbox with css