본문 바로가기

CSS Button transitions

반응형
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button

 

소스

<style>
.timedigit{
background: #1D1D1D;
}
section#button-container {
  display: inline-block;
  width: 100%;
}
section#button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
section#button-container .button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
section#button-container .button .label {
  padding: 10px;
  display: inline-block;
}
section#button-container .button.v1 .left, section#button-container .button.v1 .right, section#button-container .button.v1 .bottom, section#button-container .button.v1 .top {
  background: #f0202f;
  position: absolute;
}
section#button-container .button.v1 .left, section#button-container .button.v1 .right {
  height: 45px;
  width: 1px;
}
section#button-container .button.v1 .top, section#button-container .button.v1 .bottom {
  height: 1px;
  width: 30px;
}
section#button-container .button.v1 .top {
  top: 0;
  left: 0;
}
section#button-container .button.v1 .bottom {
  bottom: 0;
  right: 0;
}
section#button-container .button.v1 .left {
  transform: rotate(35deg);
  left: -7px;
  top: -1px;
}
section#button-container .button.v1 .right {
  transform: rotate(35deg);
  right: -7px;
  bottom: -1px;
}
section#button-container .button.v2 .icon:before, section#button-container .button.v2 .icon:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 40px;
  height: 1px;
  transform: rotate(-45deg);
}
section#button-container .button.v2 .icon:before {
  left: 0;
}
section#button-container .button.v2 .icon:after {
  right: 0;
}
section#button-container .button.v2:before, section#button-container .button.v2:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
}
section#button-container .button.v2:before {
  left: 0;
}
section#button-container .button.v2:after {
  right: 0;
}
section#button-container .button.v3:hover .icon:before, section#button-container .button.v3:hover .icon:after {
  width: 35px;
}
section#button-container .button.v3:hover .icon span:before, section#button-container .button.v3:hover .icon span:after {
  height: 35px;
}
section#button-container .button.v3 .label {
  padding: 10px 22px;
}
section#button-container .button.v3 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
}
section#button-container .button.v3 .icon:before, section#button-container .button.v3 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v3 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v3 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v3 .icon span:before, section#button-container .button.v3 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v3 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v3 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v4:hover .icon:before, section#button-container .button.v4:hover .icon:after {
  width: 10px;
}
section#button-container .button.v4:hover .icon span:before, section#button-container .button.v4:hover .icon span:after {
  height: 10px;
}
section#button-container .button.v4 .label {
  padding: 10px 22px;
}
section#button-container .button.v4 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
}
section#button-container .button.v4 .icon:before, section#button-container .button.v4 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v4 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v4 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v4 .icon span:before, section#button-container .button.v4 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v4 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v4 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v5:hover .icon {
  transform: scale(0.8);
}
section#button-container .button.v5:hover .icon:before, section#button-container .button.v5:hover .icon:after {
  width: 20px;
}
section#button-container .button.v5:hover .icon span:before, section#button-container .button.v5:hover .icon span:after {
  height: 20px;
}
section#button-container .button.v5 .label {
  padding: 10px 22px;
}
section#button-container .button.v5 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.5s;
}
section#button-container .button.v5 .icon:before, section#button-container .button.v5 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v5 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v5 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v5 .icon span:before, section#button-container .button.v5 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v5 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v5 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v6:hover .icon {
  transform: scale(0.9);
}
section#button-container .button.v6:hover .icon:before, section#button-container .button.v6:hover .icon:after {
  width: 100%;
}
section#button-container .button.v6:hover .icon span:before, section#button-container .button.v6:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v6 .label {
  padding: 10px 22px;
}
section#button-container .button.v6 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.5s;
}
section#button-container .button.v6 .icon:before, section#button-container .button.v6 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v6 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v6 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v6 .icon span:before, section#button-container .button.v6 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v6 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v6 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v7:hover .icon {
  transform: scale(0.9) skew(-40deg, 0deg);
}
section#button-container .button.v7:hover .icon:before, section#button-container .button.v7:hover .icon:after {
  width: 100%;
}
section#button-container .button.v7:hover .icon span:before, section#button-container .button.v7:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v7 .label {
  padding: 10px 22px;
}
section#button-container .button.v7 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.5s;
}
section#button-container .button.v7 .icon:before, section#button-container .button.v7 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v7 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v7 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v7 .icon span:before, section#button-container .button.v7 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v7 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v7 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v8:hover .icon {
  transform: scale(1.1) skew(-40deg, 0deg);
}
section#button-container .button.v8:hover .icon:before, section#button-container .button.v8:hover .icon:after {
  width: 100%;
}
section#button-container .button.v8:hover .icon span:before, section#button-container .button.v8:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v8 .label {
  padding: 10px 22px;
}
section#button-container .button.v8 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.5s;
}
section#button-container .button.v8 .icon:before, section#button-container .button.v8 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.5s;
}
section#button-container .button.v8 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v8 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v8 .icon span:before, section#button-container .button.v8 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.5s;
}
section#button-container .button.v8 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v8 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v9:hover .icon {
  transform: scale(1.1) skew(-40deg, 0deg);
}
section#button-container .button.v9:hover .icon:before, section#button-container .button.v9:hover .icon:after {
  width: 100%;
}
section#button-container .button.v9:hover .icon span:before, section#button-container .button.v9:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v9 .label {
  padding: 10px 22px;
}
section#button-container .button.v9 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v9 .icon:before, section#button-container .button.v9 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.2s;
}
section#button-container .button.v9 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v9 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v9 .icon span:before, section#button-container .button.v9 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.2s;
}
section#button-container .button.v9 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v9 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v10:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v10:hover .icon:before, section#button-container .button.v10:hover .icon:after {
  width: 100%;
}
section#button-container .button.v10:hover .icon span:before, section#button-container .button.v10:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v10 .label {
  padding: 10px 22px;
}
section#button-container .button.v10 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v10 .icon:before, section#button-container .button.v10 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.2s;
}
section#button-container .button.v10 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v10 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v10 .icon span:before, section#button-container .button.v10 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.2s;
}
section#button-container .button.v10 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v10 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v11:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v11:hover .icon:before, section#button-container .button.v11:hover .icon:after {
  width: 100%;
}
section#button-container .button.v11:hover .icon span:before, section#button-container .button.v11:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v11 .label {
  padding: 10px 22px;
}
section#button-container .button.v11 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v11 .icon:before, section#button-container .button.v11 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v11 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v11 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v11 .icon span:before, section#button-container .button.v11 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v11 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v11 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v12:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v12:hover .icon:before {
  width: 0;
}
section#button-container .button.v12:hover .icon:after {
  width: 100%;
}
section#button-container .button.v12:hover .icon span:before, section#button-container .button.v12:hover .icon span:after {
  height: 0;
}
section#button-container .button.v12 .label {
  padding: 10px 22px;
}
section#button-container .button.v12 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v12 .icon:before, section#button-container .button.v12 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: width 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v12 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v12 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v12 .icon span:before, section#button-container .button.v12 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: height 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v12 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v12 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v12:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v12:hover .icon:before {
  width: 0;
}
section#button-container .button.v12:hover .icon:after {
  width: 50%;
  right: 25%;
}
section#button-container .button.v12:hover .icon span:before, section#button-container .button.v12:hover .icon span:after {
  height: 0;
}
section#button-container .button.v12 .label {
  padding: 10px 22px;
}
section#button-container .button.v12 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v12 .icon:before, section#button-container .button.v12 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v12 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v12 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v12 .icon span:before, section#button-container .button.v12 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v12 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v12 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v13:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v13:hover .icon:before, section#button-container .button.v13:hover .icon:after {
  width: 60px;
}
section#button-container .button.v13:hover .icon:before {
  left: calc(50% - 30px);
}
section#button-container .button.v13:hover .icon:after {
  right: calc(50% - 30px);
}
section#button-container .button.v13:hover .icon span:before, section#button-container .button.v13:hover .icon span:after {
  height: 0;
}
section#button-container .button.v13 .label {
  padding: 10px 22px;
}
section#button-container .button.v13 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v13 .icon:before, section#button-container .button.v13 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0.4s;
}
section#button-container .button.v13 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v13 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v13 .icon span:before, section#button-container .button.v13 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v13 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v13 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v14:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v14:hover .icon:before, section#button-container .button.v14:hover .icon:after {
  width: 60px;
  transition-delay: 0.4s;
}
section#button-container .button.v14:hover .icon:before {
  left: calc(50% - 30px);
}
section#button-container .button.v14:hover .icon:after {
  right: calc(50% - 30px);
}
section#button-container .button.v14:hover .icon span:before, section#button-container .button.v14:hover .icon span:after {
  height: 0;
  transition-delay: 0s;
}
section#button-container .button.v14 .label {
  padding: 10px 22px;
}
section#button-container .button.v14 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v14 .icon:before, section#button-container .button.v14 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0s;
}
section#button-container .button.v14 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v14 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v14 .icon span:before, section#button-container .button.v14 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.4s;
}
section#button-container .button.v14 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v14 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v15:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v15:hover .icon:before, section#button-container .button.v15:hover .icon:after {
  width: 60px;
}
section#button-container .button.v15:hover .icon:before {
  left: calc(50% - 30px);
}
section#button-container .button.v15:hover .icon:after {
  right: calc(50% - 30px);
}
section#button-container .button.v15:hover .icon span:before, section#button-container .button.v15:hover .icon span:after {
  height: calc(100% - 20px);
}
section#button-container .button.v15:hover .icon span:before {
  top: 10px;
}
section#button-container .button.v15:hover .icon span:after {
  bottom: 10px;
}
section#button-container .button.v15 .label {
  padding: 10px 22px;
}
section#button-container .button.v15 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v15 .icon:before, section#button-container .button.v15 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v15 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v15 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v15 .icon span:before, section#button-container .button.v15 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v15 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v15 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v16:hover .icon:before, section#button-container .button.v16:hover .icon:after {
  width: 100%;
}
section#button-container .button.v16:hover .icon span:before, section#button-container .button.v16:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v16:hover .icon2 {
  transform: skew(-40deg, 0deg) scaleX(1);
  background: #f0202f;
  z-index: -1;
}
section#button-container .button.v16 .label {
  padding: 10px 22px;
}
section#button-container .button.v16 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg) scaleX(0.2);
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v16 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v16 .icon:before, section#button-container .button.v16 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v16 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v16 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v16 .icon span:before, section#button-container .button.v16 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v16 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v16 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v17:hover .icon:before, section#button-container .button.v17:hover .icon:after {
  width: 100%;
}
section#button-container .button.v17:hover .icon span:before, section#button-container .button.v17:hover .icon span:after {
  height: 100%;
}
section#button-container .button.v17:hover .icon2 {
  transform: skew(-40deg, 0deg) scale(1);
  background: #f0202f;
  z-index: -1;
}
section#button-container .button.v17 .label {
  padding: 10px 22px;
}
section#button-container .button.v17 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg) scaleX(0.2) scaleY(0.5);
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v17 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v17 .icon:before, section#button-container .button.v17 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v17 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v17 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v17 .icon span:before, section#button-container .button.v17 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
section#button-container .button.v17 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v17 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v18:hover .icon {
  transform: scale(0.9) skew(0deg, 0deg);
}
section#button-container .button.v18:hover .icon:before, section#button-container .button.v18:hover .icon:after {
  width: 60px;
  transition-delay: 0.4s;
}
section#button-container .button.v18:hover .icon:before {
  left: calc(50% - 30px);
}
section#button-container .button.v18:hover .icon:after {
  right: calc(50% - 30px);
}
section#button-container .button.v18:hover .icon span:before, section#button-container .button.v18:hover .icon span:after {
  height: 0;
  transition-delay: 0s;
}
section#button-container .button.v18:hover .icon2 {
  transform: skew(-40deg, 0deg) scaleX(1);
  background: #f0202f;
  z-index: -1;
  transition-delay: 0.5s;
}
section#button-container .button.v18 .label {
  padding: 10px 22px;
}
section#button-container .button.v18 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg) scaleX(0.2);
  transition: all 0.2s;
}
section#button-container .button.v18 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-40deg, 0deg);
  transition: all 0.2s;
}
section#button-container .button.v18 .icon:before, section#button-container .button.v18 .icon:after {
  content: "";
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.2s;
  transition-delay: 0s;
}
section#button-container .button.v18 .icon:before {
  left: 0;
  top: 0;
}
section#button-container .button.v18 .icon:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v18 .icon span:before, section#button-container .button.v18 .icon span:after {
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  transition: all 0.2s;
  transition-delay: 0.4s;
}
section#button-container .button.v18 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v18 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v19 .label {
  padding: 10px 30px;
  font-family: arial;
  font-size: 14px;
  display: inline-block;
  z-index: 10;
  position: relative;
  white-space: nowrap;
  line-height: 24px;
  transition: all 0.225s;
  transition-delay: 0.45s;
  letter-spacing: 2px;
}
section#button-container .button.v19.button-start .label {
  padding: 12px 65px;
}
section#button-container .button.v19 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.225s;
  transform: skew(-40deg, 0deg) scaleX(1);
  background: rgba(240, 32, 47, 0.8);
  transition-delay: 0.45s;
}
section#button-container .button.v19 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.225s;
  transform: scale(0.9) skew(0deg, 0deg);
  transition-delay: 0.15s;
}
section#button-container .button.v19 .icon:before, section#button-container .button.v19 .icon:after {
  width: 60px;
  opacity: 0;
  content: "";
  height: 1px;
  position: absolute;
  display: block;
  background: #f0202f;
  transition: all 0.375s;
  transition-delay: 0.3s;
}
section#button-container .button.v19 .icon:before {
  top: 0;
  left: calc(50% - 30px);
}
section#button-container .button.v19 .icon:after {
  bottom: 0;
  right: calc(50% - 30px);
}
section#button-container .button.v19 .icon span:before, section#button-container .button.v19 .icon span:after {
  height: 0;
  transition-delay: 0s;
  content: "";
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  transition: all 0.225s;
}
section#button-container .button.v19 .icon span:before {
  left: 0;
  top: 0;
}
section#button-container .button.v19 .icon span:after {
  right: 0;
  bottom: 0;
}
section#button-container .button.v19:hover .icon {
  transform: skew(-40deg, 0deg);
}
section#button-container .button.v19:hover .icon:before, section#button-container .button.v19:hover .icon:after {
  transition-delay: 0s;
  width: 30px;
  opacity: 1;
}
section#button-container .button.v19:hover .icon:before {
  left: 0;
}
section#button-container .button.v19:hover .icon:after {
  right: 0;
}
section#button-container .button.v19:hover .icon span:before, section#button-container .button.v19:hover .icon span:after {
  height: 30px;
  transition-delay: 0.45s;
}
section#button-container .button.v19:hover .icon2 {
  transform: skew(-40deg, 0deg) scaleX(0.2);
  background: transparent;
  transition-delay: 0s;
  opacity: 0;
}
section#button-container .button.v19.white:hover .label {
  color: #fff;
  transition-delay: 0s;
}
section#button-container .button.v19.white .icon2 {
  background: #fff;
}
section#button-container .button.v19.white .icon:before, section#button-container .button.v19.white .icon:after {
  background: #fff;
}
section#button-container .button.v19.white .icon span:before, section#button-container .button.v19.white .icon span:after {
  background: #fff;
}
section#button-container .button.v19.labelred .label {
  color: #f0202f;
}
section#button-container .button.v19.labelgray .label {
  color: #1D1D1D;
}
section#button-container .button.v19.transparent {
  float: none;
  display: inline-block;
  transform: translateZ(0px);
}
section#button-container .button.v19.transparent .label {
  color: #fff;
  transition-delay: 0s;
}
section#button-container .button.v19.transparent .icon2 {
  background: transparent;
}
section#button-container .button.v19.transparent .icon {
  transform: scale(1) skew(10deg, 0deg);
}
section#button-container .button.v19.transparent .icon:before, section#button-container .button.v19.transparent .icon:after {
  background: #fff;
}
section#button-container .button.v19.transparent .icon span:before, section#button-container .button.v19.transparent .icon span:after {
  background: #fff;
}
section#button-container .button.v19.transparent:hover .icon {
  transform: scale(1) skew(-40deg, 0deg);
}
</style>
<div class="timedigit">
<section id="button-container">
    <div class="container">
        <div class="button v3">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v4">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v5">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v6">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v7">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v8">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v9">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v10">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v11">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v12">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v13">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v14">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v15">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v16">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
        </div>
        <div class="button v17">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
        </div>
        <div class="button v18">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
      </div>
  </div>
  <div class="container">
      <div class="button v19">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
      <div class="button v19 white labelgray">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
      <div class="button v19 transparent">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
    </div>
</section>
</div>
반응형
저작자표시

'디자인소스' 카테고리의 다른 글

Placeholder 포커스시 감추기, 글자색 변경  (0) 2023.09.21
CSS3 Loader & Spinners 모음  (0) 2023.09.20
Glowing Pulse Search Form  (0) 2023.09.20
CSS3 Checkbox Styles  (0) 2023.09.19
Candy Color Button Animation  (0) 2023.09.19
제이쿼리 CSS Digital Clock  (0) 2023.09.19
video screen effect 효과 반응형  (0) 2023.09.19
youtube 반응형 플레이어  (0) 2023.09.19

관련글

댓글

Copyright ⓒ SmartWeb All rights reserved.

티스토리툴바