All the possible button | rahulpgupta

on

 

All the possible button effects

All the possible button || rahulpgupta

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 2D-Animations | Transitions | Effects</title>
    
  <style>
  * {
    box-sizing: border-box;
  }
  
  section {
    margin: auto;
    width: 75%;
  }
  
  h1 {
    color: #111;
    font-family: 'Spicy Rice', serif;
    font-size: 30px;
    letter-spacing: 3px;
    text-align: center;
  }
  
  button {
    background: #cccccc;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    color: #111;
    font-family: 'Puritan', sans-serif;
    font-size: 20px;
    outline: none;
    padding: 15px;
    margin: 6px;
  }
  
  @media screen and (max-width: 420px) {
    section {
      align-items: center;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    section button {
      margin: 10px 0;
      width: 280px;
    }
  
    h1 {
      font-size: 20px;
      margin-top: 50px;
    }
  }
  .Float_Right {
    transition: all 0.3s ease-out;
  }
  .Float_Right:hover, .Float_Right:focus, .Float_Right:active {
    cursor: pointer;
    transform: translateX(6px);
  }
  
  .Float_Left {
    transition: all 0.3s ease-out;
  }
  .Float_Left:hover, .Float_Left:focus, .Float_Left:active {
    cursor: pointer;
    transform: translateX(-6px);
  }
  
  .Float_Bottom {
    transition: all 0.3s ease-out;
  }
  .Float_Bottom:hover, .Float_Bottom:focus, .Float_Bottom:active {
    cursor: pointer;
    transform: translateY(6px);
  }
  
  .Float_Top {
    transition: all 0.3s ease-out;
  }
  .Float_Top:hover, .Float_Top:focus, .Float_Top:active {
    cursor: pointer;
    transform: translateY(-8px);
  }
  
  .Rotate_Right {
    transition: transform 0.3s ease;
  }
  .Rotate_Right:hover, .Rotate_Right:focus, .Rotate_Right:active {
    cursor: pointer;
    transform: rotate(4deg);
  }
  
  .Rotate_Left {
    transition: transform 0.3s ease;
  }
  .Rotate_Left:hover, .Rotate_Left:focus, .Rotate_Left:active {
    cursor: pointer;
    transform: rotate(-4deg);
  }
  
  .Expand {
    transition: transform 0.3s ease;
  }
  .Expand:hover, .Expand:focus, .Expand:active {
    cursor: pointer;
    transform: scale(1.1);
  }
  
  .shrink {
    transition: transform 0.3s ease;
  }
  .shrink:hover, .shrink:focus, .shrink:active {
    cursor: pointer;
    transform: scale(0.9);
  }
  
  .Pulse:hover, .Pulse:focus, .Pulse:active {
    animation: hover-pulse 1s linear infinite;
    cursor: pointer;
  }
  
  @keyframes hover-pulse {
    25% {
      transform: scale(1.1);
    }
    75% {
      transform: scale(0.9);
    }
  }
  .Push:hover, .Push:focus, .Push:active {
    animation: hover-push 0.3s linear 1;
    cursor: pointer;
  }
  
  @keyframes hover-push {
    50% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  .Pop:hover, .Pop:focus, .Pop:active {
    animation: hover-pop 0.3s linear 1;
    cursor: pointer;
  }
  
  @keyframes hover-pop {
    50% {
      transform: scale(1.2);
    }
  }
  .skew {
    transition: transform 0.3s ease;
  }
  .skew:hover, .skew:focus, .skew:active {
    cursor: pointer;
    transform: skew(-10deg);
  }
  
  .skew_forward {
    transform-origin: 0 100%;
    transition: transform 0.3s ease;
  }
  .skew_forward:hover, .skew_forward:focus, .skew_forward:active {
    cursor: pointer;
    transform: skew(-10deg);
  }
  
  .skew_backward {
    transform-origin: 0 100%;
    transition: transform 0.3s ease;
  }
  .skew_backward:hover, .skew_backward:focus, .skew_backward:active {
    cursor: pointer;
    transform: skew(10deg);
  }
  
  .skew_wobble:hover, .skew_wobble:focus, .skew_wobble:active {
    animation: hover-skew-wobble 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-skew-wobble {
    15% {
      transform: skew(-12deg);
    }
    30% {
      transform: skew(10deg);
    }
    50% {
      transform: skew(-6deg);
    }
    65% {
      transform: skew(4deg);
    }
    80% {
      transform: skew(-2deg);
    }
    100% {
      transform: skew(0);
    }
  }
  .wobble_horizontal:hover, .wobble_horizontal:focus, .wobble_horizontal:active {
    animation: hover-wobble-horizontal 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-horizontal {
    20% {
      transform: translateX(8px);
    }
    40% {
      transform: translateX(-6px);
    }
    60% {
      transform: translateX(4px);
    }
    80% {
      transform: translateX(-2px);
    }
    100% {
      transform: translateX(0);
    }
  }
  .wobble_vertical:hover, .wobble_vertical:focus, .wobble_vertical:active {
    animation: hover-wobble-vertical 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-vertical {
    20% {
      transform: translateY(8px);
    }
    40% {
      transform: translateY(-6px);
    }
    60% {
      transform: translateY(4px);
    }
    80% {
      transform: translateY(-2px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .wobble_b_right:hover, .wobble_b_right:focus, .wobble_b_right:active {
    animation: hover-wobble-to-bottom-right 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-to-bottom-right {
    15% {
      transform: translate(7px, 7px);
    }
    30% {
      transform: translate(-6px, -6px);
    }
    45% {
      transform: translate(4px, 4px);
    }
    60% {
      transform: translate(-2px, -2px);
    }
    75% {
      transform: translate(1px, 1px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  .wobble_t_right:hover, .wobble_t_right:focus, .wobble_t_right:active {
    animation: hover-wobble-to-top-right 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-to-top-right {
    15% {
      transform: translate(7px, -7px);
    }
    30% {
      transform: translate(-6px, 6px);
    }
    45% {
      transform: translate(4px, -4px);
    }
    60% {
      transform: translate(-2px, 2px);
    }
    75% {
      transform: translate(1px, -1px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  .wobble_top {
    transform-origin: 0 100%;
  }
  .wobble_top:hover, .wobble_top:focus, .wobble_top:active {
    animation: hover-wobble-top 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-top {
    15% {
      transform: skew(-12deg);
    }
    30% {
      transform: skew(10deg);
    }
    50% {
      transform: skew(-6deg);
    }
    65% {
      transform: skew(4deg);
    }
    80% {
      transform: skew(-2deg);
    }
    100% {
      transform: skew(0);
    }
  }
  .wobble_bottom {
    transform-origin: 100% 0;
  }
  .wobble_bottom:hover, .wobble_bottom:focus, .wobble_bottom:active {
    animation: hover-wobble-bottom 1s ease-in-out 1;
    cursor: pointer;
  }
  
  @keyframes hover-wobble-bottom {
    15% {
      transform: skew(-12deg);
    }
    30% {
      transform: skew(10deg);
    }
    50% {
      transform: skew(-6deg);
    }
    65% {
      transform: skew(4deg);
    }
    80% {
      transform: skew(-2deg);
    }
    100% {
      transform: skew(0);
    }
  }
  .shake:hover, .shake:focus, .shake:active {
    animation: hover-shake 0.15s linear infinite;
    cursor: pointer;
  }
  
  @keyframes hover-shake {
    50% {
      transform: translateX(3px) rotate(2deg);
    }
    100% {
      transform: translateX(-3px) rotate(-2deg);
    }
  }
  .shake_out:hover, .shake_out:focus, .shake_out:active {
    animation: hover-shake-out 0.75s linear 1;
    cursor: pointer;
  }
  
  @keyframes hover-shake-out {
    10% {
      transform: translateX(3px) rotate(2deg);
    }
    20% {
      transform: translateX(-3px) rotate(-2deg);
    }
    30% {
      transform: translateX(3px) rotate(2deg);
    }
    40% {
      transform: translateX(-3px) rotate(-2deg);
    }
    50% {
      transform: translateX(2px) rotate(1deg);
    }
    60% {
      transform: translateX(-2px) rotate(-1deg);
    }
    70% {
      transform: translateX(2px) rotate(1deg);
    }
    80% {
      transform: translateX(-2px) rotate(-1deg);
    }
    90% {
      transform: translateX(1px) rotate(0);
    }
    100% {
      transform: translateX(-1px) rotate(0);
    }
  }
  .bounce_in {
    transition-duration: 0.5s;
  }
  .bounce_in:hover, .bounce_in:focus, .bounce_in:active {
    cursor: pointer;
    transform: scale(0.9);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  }
  
  .bounce_out {
    transition-duration: 0.5s;
  }
  .bounce_out:hover, .bounce_out:focus, .bounce_out:active {
    cursor: pointer;
    transform: scale(1.15);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  }
  
  .bob:hover, .bob:focus, .bob:active {
    animation-delay: 0s, .3s;
    animation-direction: normal, alternate;
    animation-duration: .3s, 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1, infinite;
    animation-name: hover-bob-float, hover-bob;
    animation-timing-function: ease-out, ease-in-out;
    cursor: pointer;
  }
  
  @keyframes hover-bob {
    0% {
      transform: translateY(6px);
    }
    50% {
      transform: translateY(-3px);
    }
    100% {
      transform: translateY(6px);
    }
  }
  @keyframes hover-bob-float {
    100% {
      transform: translateY(6px);
    }
  }
  .t_d_03s {
    transition: background 0.3s ease;
  }
  .t_d_03s:hover, .t_d_03s:focus {
    background: #5543e0;
    color: #fff;
    cursor: pointer;
  }
  
  .t_d_1s {
    transition: background 1s ease;
  }
  .t_d_1s:hover, .t_d_1s:focus {
    background: #5543e0;
    color: #fff;
    cursor: pointer;
  }
  
  .t_d_05s {
    transition: background 0.3s ease 0.5s, color 0.3s ease 0.5s;
  }
  .t_d_05s:hover, .t_d_05s:focus {
    background: #5543e0;
    color: #fff;
    cursor: pointer;
  }
  
  .mul_t {
    transition: background 0.5s ease, color 0.5s linear;
  }
  .mul_t:hover {
    background: #5543e0;
    color: #fff;
    cursor: pointer;
    color: #fe29b5;
  }
  
  .sweep_right {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .sweep_right:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .sweep_right:hover, .sweep_right:focus, .sweep_right:active {
    color: #fff;
    cursor: pointer;
  }
  .sweep_right:hover:before, .sweep_right:focus:before, .sweep_right:active:before {
    transform: scaleX(1);
  }
  
  .sweep_left {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .sweep_left:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .sweep_left:hover, .sweep_left:focus, .sweep_left:active {
    color: #fff;
    cursor: pointer;
  }
  .sweep_left:hover:before, .sweep_left:focus:before, .sweep_left:active:before {
    transform: scaleX(1);
  }
  
  .sweep_bottom {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .sweep_bottom:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleY(0);
    transform-origin: 100% 0;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .sweep_bottom:hover, .sweep_bottom:focus, .sweep_bottom:active {
    color: #fff;
    cursor: pointer;
  }
  .sweep_bottom:hover:before, .sweep_bottom:focus:before, .button7:active:before {
    transform: scaleY(1);
  }
  
  .sweep_top {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .sweep_top:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleY(0);
    transform-origin: 0 100%;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .sweep_top:hover, .sweep_top:focus, .sweep_top:active {
    color: #fff;
    cursor: pointer;
  }
  .sweep_top:hover:before, .sweep_top:focus:before, .sweep_top:active:before {
    transform: scaleY(1);
  }
  
  .h_osweep {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .h_osweep:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .h_osweep:hover, .h_osweep:focus, .h_osweep:active {
    color: #fff;
    cursor: pointer;
  }
  .h_osweep:hover:before, .h_osweep:focus:before, .h_osweep:active:before {
    transform: scaleX(1);
  }
  
  .h_isweep {
    background: #5543e0;
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .h_isweep:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #ccc;
    border-radius: 5px;
    content: '';
    transform: scaleX(1);
    transform-origin: center;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .h_isweep:hover, .h_isweep:focus, .h_isweep:active {
    color: #fff;
    cursor: pointer;
  }
  .h_isweep:hover:before, .h_isweep:focus:before, .h_isweep:active:before {
    transform: scaleX(0);
  }
  
  .v_osweep {
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .v_osweep:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .v_osweep:hover, .v_osweep:focus, .v_osweep:active {
    color: #fff;
    cursor: pointer;
  }
  .v_osweep:hover:before, .v_osweep:focus:before, .v_osweep:active:before {
    transform: scaleY(1);
  }
  
  .v_isweep {
    background: #5543e0;
    position: relative;
    transform: translateZ(0);
    transition: color 0.3s ease;
  }
  .v_isweep:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #ccc;
    border-radius: 5px;
    content: '';
    transform: scaleY(1);
    transform-origin: center;
    transition: transform 0.3s ease-out;
    z-index: -1;
  }
  .v_isweep:hover, .v_isweep:focus, .v_isweep:active {
    color: #fff;
    cursor: pointer;
  }
  .v_isweep:hover:before, .v_isweep:focus:before, .v_isweep:active:before {
    transform: scaleY(0);
  }
  
  .b_right {
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .b_right:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .b_right:hover, .b_right:focus, .b_right:active {
    color: #fff;
    cursor: pointer;
  }
  .b_right:hover:before, .b_right:focus:before, .button13:active:before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  
  .b_left {
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .b_left:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .b_left:hover, .b_left:focus, .b_left:active {
    color: #fff;
    cursor: pointer;
  }
  .b_left:hover:before, .b_left:focus:before, .b_left:active:before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  
  .b_bottom {
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .b_bottom:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleY(0);
    transform-origin: 100% 0;
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .b_bottom:hover, .b_bottom:focus, .b_bottom:active {
    color: #fff;
    cursor: pointer;
  }
  .b_bottom:hover:before, .b_bottom:focus:before, .b_bottom:active:before {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  
  .b_top {
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .b_top:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scaleY(0);
    transform-origin: 0 100%;
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .b_top:hover, .b_top:focus, .b_top:active {
    color: #fff;
    cursor: pointer;
  }
  .b_top:hover:before, .b_top:focus:before, .b_top:active:before {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  
  .rec_in {
    background: #5543e0;
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .rec_in:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #ccc;
    border-radius: 5px;
    content: '';
    transform: scale(1);
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .rec_in:hover, .rec_in:focus, .rec_in:active {
    color: #fff;
    cursor: pointer;
  }
  .rec_in:hover:before, .rec_in:focus:before, .rec_in:active:before {
    transform: scale(0);
  }
  
  .rec_out {
    background: #ccc;
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .rec_out:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 5px;
    content: '';
    transform: scale(0);
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .rec_out:hover, .rec_out:focus, .rec_out:active {
    color: #fff;
    cursor: pointer;
  }
  .rec_out:hover:before, .rec_out:focus:before, .rec_out:active:before {
    transform: scale(1);
  }
  
  .redial_in {
    background: #5543e0;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .redial_in:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #ccc;
    border-radius: 100%;
    content: '';
    transform: scale(2);
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .redial_in:hover, .redial_in:focus, .redial_in:active {
    color: #fff;
    cursor: pointer;
  }
  .redial_in:hover:before, .redial_in:focus:before, .redial_in:active:before {
    transform: scale(0);
  }
  
  .redial_out {
    background: #ccc;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    transition: color 0.5s ease;
  }
  .redial_out:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #5543e0;
    border-radius: 100%;
    content: '';
    transform: scale(0);
    transition: transform 0.5s ease-out;
    z-index: -1;
  }
  .redial_out:hover, .redial_out:focus, .redial_out:active {
    color: #fff;
    cursor: pointer;
  }
  .redial_out:hover:before, .redial_out:focus:before, .redial_out:active:before {
    transform: scale(2);
  }
  
  .fade_in {
    box-shadow: inset 0 0 0 4px #ccc;
    transition: box-shadow 0.5s ease;
  }
  .fade_in:hover, .fade_in:focus, .fade_in:active {
    box-shadow: inset 0 0 0 4px #1eac9b;
    cursor: pointer;
  }
  
  .hollow_out {
    box-shadow: inset 0 0 0 4px #ccc;
    transition: background 0.5s ease;
  }
  .hollow_out:hover, .hollow_out:focus, .hollow_out:active {
    background: none;
    box-shadow: inset 0 0 0 4px #1eac9b;
    cursor: pointer;
  }
  
  .inset_border {
    box-shadow: none;
    position: relative;
  }
  .inset_border:before {
    border: #1eac9b solid 4px;
    border-radius: 5px;
    bottom: 4px;
    content: '';
    left: 4px;
    opacity: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    transition: opacity 0.3s ease;
  }
  .inset_border:hover:before, .inset_border:focus:before, .inset_border:active:before {
    cursor: pointer;
    opacity: 1;
  }
  
  .out_out {
    box-shadow: none;
    position: relative;
  }
  .out_out:before {
    border: #ccc solid 4px;
    border-radius: 5px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: 0.3s;
    transition-property: top, right, bottom, left;
  }
  .out_out:hover:before, .out_out:focus:before, .out_out:active:before {
    border-color: #1eac9b;
    bottom: -7px;
    cursor: pointer;
    left: -7px;
    right: -7px;
    top: -7px;
  }
  
  .out_in {
    box-shadow: none;
    position: relative;
  }
  .out_in:before {
    border: #ccc solid 4px;
    border-radius: 5px;
    bottom: -16px;
    content: '';
    left: -16px;
    opacity: 0;
    position: absolute;
    right: -16px;
    top: -16px;
    transition-duration: 0.3s;
    transition-property: top, right, bottom, left;
  }
  .out_in:hover:before, .out_in:focus:before, .out_in:active:before {
    border-color: #1eac9b;
    bottom: -7px;
    cursor: pointer;
    left: -7px;
    opacity: 1;
    right: -7px;
    top: -7px;
  }
  
  .rip_out {
    box-shadow: none;
    position: relative;
  }
  .rip_out:before {
    animation-duration: 1s;
    border: #ccc solid 6px;
    border-radius: 5px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  .rip_out:hover:before, .rip_out:focus:before, .rip_out:active:before {
    animation-name: hover-ripple-out;
    border-color: #1eac9b;
    cursor: pointer;
  }
  
  @keyframes hover-ripple-out {
    100% {
      bottom: -12px;
      left: -12px;
      opacity: 0;
      right: -12px;
      top: -12px;
    }
  }
  .rip_in {
    box-shadow: none;
    position: relative;
  }
  .rip_in:before {
    animation-duration: 1s;
    border: #ccc solid 4px;
    border-radius: 5px;
    bottom: -12px;
    content: '';
    left: -12px;
    opacity: 0;
    position: absolute;
    right: -12px;
    top: -12px;
  }
  .rip_in:hover:before, .rip_in:focus:before, .rip_in:active:before {
    animation-name: hover-ripple-in;
    border-color: #1eac9b;
    cursor: pointer;
  }
  
  @keyframes hover-ripple-in {
    100% {
      bottom: 0;
      left: 0;
      opacity: 1;
      right: 0;
      top: 0;
    }
  }
  .Uline_left {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .Uline_left:before {
    background: #1eac9b;
    bottom: 0;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 100%;
    transition: right 0.3s ease-out;
  }
  .Uline_left:hover, .Uline_left:focus, .Uline_left:active {
    cursor: pointer;
  }
  .Uline_left:hover:before, .Uline_left:focus:before, .Uline_left:active:before {
    right: 0;
  }
  
  .Uline_right {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .Uline_right:before {
    background: #1eac9b;
    bottom: 0;
    content: '';
    height: 4px;
    left: 100%;
    position: absolute;
    right: 0;
    transition: left 0.3s ease-out;
  }
  .Uline_right:hover, .Uline_right:focus, .Uline_right:active {
    cursor: pointer;
  }
  .Uline_right:hover:before, .Uline_right:focus:before, .Uline_right:active:before {
    left: 0;
  }
  
  .Uline_center {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .Uline_center:before {
    background: #1eac9b;
    bottom: 0;
    content: '';
    height: 4px;
    left: 50%;
    position: absolute;
    right: 50%;
    transition: 0.3s ease-out;
    transition-property: left, right;
  }
  .Uline_center:hover, .Uline_center:focus, .Uline_center:active {
    cursor: pointer;
  }
  .Uline_center:hover:before, .Uline_center:focus:before, .Uline_center:active:before {
    left: 0;
    right: 0;
  }
  
  .oline_left {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .oline_left:before {
    background: #1eac9b;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 100%;
    top: 0;
    transition: right 0.3s ease-out;
  }
  .oline_left:hover, .oline_left:focus, .oline_left:active {
    cursor: pointer;
  }
  .oline_left:hover:before, .oline_left:focus:before, .oline_left:active:before {
    right: 0;
  }
  
  .oline_right {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .oline_right:before {
    background: #1eac9b;
    content: '';
    height: 4px;
    left: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition: left 0.3s ease-out;
  }
  .oline_right:hover, .oline_right:focus, .oline_right:active {
    cursor: pointer;
  }
  .oline_right:hover:before, .oline_right:focus:before, .oline_right:active:before {
    left: 0;
  }
  
  .rou_cor {
    box-shadow: none;
    transition: border-radius 0.5s ease;
  }
  .rou_cor:hover, .rou_cor:focus, .rou_cor:active {
    border-radius: 50%;
    cursor: pointer;
  }
  
  .reveal {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .reveal:before {
    border-color: #1eac9b;
    border-radius: 5px;
    border-style: solid;
    border-width: 0;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: border-width 0.2s ease-out;
  }
  .reveal:hover, .reveal:focus, .reveal:active {
    cursor: pointer;
  }
  .reveal:hover:before, .reveal:focus:before, .reveal:active:before {
    border-width: 4px;
    transform: translateY(0);
  }
  
  .und_reveal {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .und_reveal:before {
    background: #1eac9b;
    bottom: 0;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    transform: translateY(4px);
    transition: transform 0.3s ease-out;
  }
  .und_reveal:hover, .und_reveal:focus, .und_reveal:active {
    cursor: pointer;
  }
  .und_reveal:hover:before, .und_reveal:focus:before, .und_reveal:active:before {
    transform: translateY(0);
  }
  
  .over_reveal {
    box-shadow: none;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
  }
  .over_reveal:before {
    background: #1eac9b;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-4px);
    transition: transform 0.3s ease-out;
  }
  .over_reveal:hover, .over_reveal:focus, .over_reveal:active {
    cursor: pointer;
  }
  .over_reveal:hover:before, .over_reveal:focus:before, .over_reveal:active:before {
    transform: translateY(0);
  }
  
  .shadow_bottom {
    box-shadow: 0 0 1px #ccc;
    transition: box-shadow 0.3s ease;
  }
  .shadow_bottom:hover, .shadow_bottom:focus, .shadow_bottom:active {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  .shadow_sides {
    box-shadow: 0 0 1px #ccc;
    transition: box-shadow 0.3s ease;
  }
  .shadow_sides:hover, .shadow_sides:focus, .shadow_sides:active {
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  .shadow_grow {
    box-shadow: 0 0 1px #ccc;
    transition-duration: 0.3s;
    transition-property: box-shadow, transform;
  }
  .shadow_grow:hover, .shadow_grow:focus, .shadow_grow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transform: scale(1.1);
  }
  
  .shadow_float {
    box-shadow: 0 0 1px #ccc;
    position: relative;
    transition: transform 0.3s ease;
  }
  .shadow_float:before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    content: '';
    height: 10px;
    left: 5%;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition-duration: 0.3s;
    transition-property: transform, opacity;
    width: 90%;
  }
  .shadow_float:hover, .shadow_float:focus, .shadow_float:active {
    cursor: pointer;
    transform: translateY(-5px);
  }
  .shadow_float:hover:before, .shadow_float:focus:before, .shadow_float:active:before {
    opacity: 1;
    transform: translateY(5px);
  }
  
  .shadow_glow {
    box-shadow: 0 0 1px #ccc;
    transition: box-shadow 0.3s ease;
  }
  .shadow_glow:hover, .shadow_glow:focus, .shadow_glow:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }
  
  .shadow_radial {
    box-shadow: 0 0 1px #ccc;
    position: relative;
  }
  .shadow_radial:before, .shadow_radial:after {
    content: '';
    height: 5px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
    width: 100%;
  }
  .shadow_radial:before {
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
    bottom: 100%;
  }
  .shadow_radial:after {
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
    top: 100%;
  }
  .shadow_radial:hover, .shadow_radial:focus, .shadow_radial:active {
    cursor: pointer;
  }
  .shadow_radial:hover:before, .shadow_radial:hover:after, .shadow_radial:focus:before, .shadow_radial:focus:after, .shadow_radial:active:before, .shadow_radial:active:after {
    opacity: 1;
  }
  
  .shadow_outset {
    box-shadow: 0 0 1px #ccc;
    transition: box-shadow 0.3s ease;
  }
  .shadow_outset:hover, .shadow_outset:focus, .shadow_outset:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  .shadow_inset {
    box-shadow: 0 0 1px #ccc;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5), 0 0 1px transparent;
    transition: box-shadow 0.3s ease;
  }
  .shadow_inset:hover, .shadow_inset:focus, .shadow_inset:active {
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5), 0 0 1px transparent;
    cursor: pointer;
  }
  
  .curl_left {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .curl_left:before {
    background: #fff;
    background: linear-gradient(135deg, #fff 45%, #aaaaaa 50%, #cccccc 56%, #fff 80%);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition-duration: 0.3s;
    transition-property: width, height;
    width: 0;
  }
  .curl_left:hover, .curl_left:focus, .curl_left:active {
    cursor: pointer;
  }
  .curl_left:hover:before, .curl_left:focus:before, .curl_left:active:before {
    height: 25px;
    width: 25px;
  }
  
  .curl_right {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .curl_right:before {
    background: #fff;
    background: linear-gradient(225deg, #fff 45%, #aaaaaa 50%, #cccccc 56%, #fff 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: 0.3s;
    transition-property: width, height;
    width: 0;
  }
  .curl_right:hover, .curl_right:focus, .curl_right:active {
    cursor: pointer;
  }
  .curl_right:hover:before, .curl_right:focus:before, .curl_right:active:before {
    height: 25px;
    width: 25px;
  }
  
  .curl_bot_left {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .curl_bot_left:before {
    background: #fff;
    background: linear-gradient(45deg, #fff 45%, #aaaaaa 50%, #cccccc 56%, #fff 80%);
    bottom: 0;
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    transition-duration: 0.3s;
    transition-property: width, height;
    width: 0;
  }
  .curl_bot_left:hover, .curl_bot_left:focus, .curl_bot_left:active {
    cursor: pointer;
  }
  .curl_bot_left:hover:before, .curl_bot_left:focus:before, .curl_bot_left:active:before {
    height: 25px;
    width: 25px;
  }
  
  .curl_bot_right {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .curl_bot_right:before {
    background: #fff;
    background: linear-gradient(315deg, #fff 45%, #aaaaaa 50%, #cccccc 56%, #fff 80%);
    bottom: 0;
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    transition-duration: 0.3s;
    transition-property: width, height;
    width: 0;
  }
  .curl_bot_right:hover, .curl_bot_right:focus, .curl_bot_right:active {
    cursor: pointer;
  }
  .curl_bot_right:hover:before, .curl_bot_right:focus:before, .curl_bot_right:active:before {
    height: 25px;
    width: 25px;
  }
  
  .bub_top {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .bub_top:before {
    border-color: transparent transparent #ccc transparent;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    content: '';
    left: calc(50% - 10px);
    position: absolute;
    top: 0;
    transition: transform 0.3s ease;
  }
  .bub_top:hover, .bub_top:focus, .bub_top:active {
    cursor: pointer;
  }
  .bub_top:hover:before, .bub_top:focus:before, .bub_top:active:before {
    transform: translateY(-10px);
  }
  
  .bub_right {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .bub_right:before {
    border-color: transparent transparent transparent #ccc;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition: transform 0.3s ease;
  }
  .bub_right:hover, .bub_right:focus, .bub_right:active {
    cursor: pointer;
  }
  .bub_right:hover:before, .bub_right:focus:before, .bub_right:active:before {
    transform: translateX(10px);
  }
  
  .bub_bottom {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .bub_bottom:before {
    border-color: #ccc transparent transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    bottom: 0;
    content: '';
    left: calc(50% - 10px);
    position: absolute;
    transition: transform 0.3s ease;
  }
  .bub_bottom:hover, .bub_bottom:focus, .bub_bottom:active {
    cursor: pointer;
  }
  .bub_bottom:hover:before, .bub_bottom:focus:before, .bub_bottom:active:before {
    transform: translateY(10px);
  }
  
  .bub_left {
    box-shadow: 0 0 1px transparent;
    position: relative;
  }
  .bub_left:before {
    border-color: transparent #ccc transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    content: '';
    left: 0;
    position: absolute;
    top: calc(50% - 10px);
    transition: transform 0.3s ease;
  }
  .bub_left:hover, .bub_left:focus, .bub_left:active {
    cursor: pointer;
  }
  .bub_left:hover:before, .bub_left:focus:before, .bub_left:active:before {
    transform: translateX(-10px);
  }
  
  .bub_fl_top {
    box-shadow: 0 0 1px transparent;
    position: relative;
    transition: transform 0.3s ease;
  }
  .bub_fl_top:before {
    border-color: transparent transparent #ccc transparent;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    content: '';
    left: calc(50% - 10px);
    position: absolute;
    top: 0;
    transition: transform 0.3s ease;
  }
  .bub_fl_top:hover, .bub_fl_top:focus, .bub_fl_top:active {
    cursor: pointer;
    transform: translateY(10px);
  }
  .bub_fl_top:hover:before, .bub_fl_top:focus:before, .bub_fl_top:active:before {
    transform: translateY(-10px);
  }
  
  .bub_fl_right {
    box-shadow: 0 0 1px transparent;
    position: relative;
    transition: transform 0.3s ease;
  }
  .bub_fl_right:before {
    border-color: transparent transparent transparent #ccc;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition: transform 0.3s ease;
  }
  .bub_fl_right:hover, .bub_fl_right:focus, .bub_fl_right:active {
    cursor: pointer;
    transform: translateX(-10px);
  }
  .bub_fl_right:hover:before, .bub_fl_right:focus:before, .bub_fl_right:active:before {
    transform: translateX(10px);
  }
  
  .bub_fl_bottom {
    box-shadow: 0 0 1px transparent;
    position: relative;
    transition: transform 0.3s ease;
  }
  .bub_fl_bottom:before {
    border-color: #ccc transparent transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    bottom: 0;
    content: '';
    left: calc(50% - 10px);
    position: absolute;
    transition: transform 0.3s ease;
  }
  .bub_fl_bottom:hover, .bub_fl_bottom:focus, .bub_fl_bottom:active {
    cursor: pointer;
    transform: translateY(-10px);
  }
  .bub_fl_bottom:hover:before, .bub_fl_bottom:focus:before, .bub_fl_bottom:active:before {
    transform: translateY(10px);
  }
  
  .bub_fl_left {
    box-shadow: 0 0 1px transparent;
    position: relative;
    transition: transform 0.3s ease;
  }
  .bub_fl_left:before {
    border-color: transparent #ccc transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    content: '';
    left: 0;
    position: absolute;
    top: calc(50% - 10px);
    transition: transform 0.3s ease;
  }
  .bub_fl_left:hover, .bub_fl_left:focus, .bub_fl_left:active {
    cursor: pointer;
    transform: translateX(10px);
  }
  .bub_fl_left:hover:before, .bub_fl_left:focus:before, .bub_fl_left:active:before {
    transform: translateX(-10px);
  }
  </style>
  
  
  </head>
  
  <body translate="no">
    <section>
        <h1>2D Animations</h1>
        <button class="Float_Right" type="button" name="button">Float Right</button>
        <button class="Float_Left" type="button" name="button">Float Left</button>
        <button class="Float_Bottom" type="button" name="button">Float Bottom</button>
        <button class="Float_Top" type="button" name="button">Float Top</button>
        <button class="Rotate_Right" type="button" name="button">Rotate Right</button>
        <button class="Rotate_Left" type="button" name="button">Rotate Left</button>
        <button class="Expand" type="button" name="button">Expand</button>
        <button class="shrink" type="button" name="button">Shrink</button>
        <button class="Pulse" type="button" name="button">Pulse</button>
        <button class="Push" type="button" name="button">Push</button>
        <button class="Pop" type="button" name="button">Pop</button>
        <button class="skew" type="button" name="button">Skew</button>
        <button class="skew_forward" type="button" name="button">Skew Forward</button>
        <button class="skew_backward" type="button" name="button">Skew Backward</button>
        <button class="skew_wobble" type="button" name="button">Skew Wobble</button>
        <button class="wobble_horizontal" type="button" name="button">Wobble Horizontal</button>
        <button class="wobble_vertical" type="button" name="button">Wobble Vertical</button>
        <button class="wobble_b_right" type="button" name="button">Wobble to Bottom Right</button>
        <button class="wobble_t_right" type="button" name="button">Wobble to Top Right</button>
        <button class="wobble_top" type="button" name="button">Wobble Top</button>
        <button class="wobble_bottom" type="button" name="button">Wobble Bottom</button>
        <button class="shake" type="button" name="button">Shake</button>
        <button class="shake_out" type="button" name="button">Shake Out</button>
        <button class="bounce_in" type="button" name="button">Bounce In</button>
        <button class="bounce_out" type="button" name="button">Bounce Out</button>
        <button class="bob" type="button" name="button">Bob</button>
      </section>
      <section>
        <h1>Background Transitions</h1>
        <button class="t_d_03s" type="button" name="button">Transition Duration 0.3s</button>
        <button class="t_d_1s" type="button" name="button">Transition Duration 1s</button>
        <button class="t_d_05s" type="button" name="button">Transition Delay 0.5s</button>
        <button class="mul_t" type="button" name="button">Multiple Transitions</button>
        <button class="sweep_right" type="button" name="button">Sweep to Right</button>
        <button class="sweep_left" type="button" name="button">Sweep to Left</button>
        <button class="sweep_bottom" type="button" name="button">Sweep to Bottom</button>
        <button class="sweep_top" type="button" name="button">Sweep to Top</button>
        <button class="h_osweep" type="button" name="button">Horizontal Outer Sweep</button>
        <button class="h_isweep" type="button" name="button">Horizontal Inner Sweep</button>
        <button class="v_osweep" type="button" name="button">Vertical Outer Sweep</button>
        <button class="v_isweep" type="button" name="button">Vertical Inner Sweep</button>
        <button class="b_right" type="button" name="button">Bounce to Right</button>
        <button class="b_left" type="button" name="button">Bounce to Left</button>
        <button class="b_bottom" type="button" name="button">Bounce to Bottom</button>
        <button class="b_top" type="button" name="button">Bounce to Top</button>
        <button class="rec_in" type="button" name="button">Rectangle In</button>
        <button class="rec_out" type="button" name="button">Rectangle Out</button>
        <button class="redial_in" type="button" name="button">Radial In</button>
        <button class="redial_out" type="button" name="button">Radial Out</button>
      </section>
      <section>
        <h1>Border Transitions</h1>
        <button class="fade_in" type="button" name="button">Fade In</button>
        <button class="hollow_out" type="button" name="button">Hollow Out</button>
        <button class="inset_border" type="button" name="button">Inset Border</button>
        <button class="out_out" type="button" name="button">Outline Out</button>
        <button class="out_in" type="button" name="button">Outline In</button>
        <button class="rip_out" type="button" name="button">Ripple Out</button>
        <button class="rip_in" type="button" name="button">Ripple In</button>
        <button class="Uline_left" type="button" name="button">Underline from Left</button>
        <button class="Uline_right" type="button" name="button">Underline from Right</button>
        <button class="Uline_center" type="button" name="button">Underline from Center</button>
        <button class="oline_left" type="button" name="button">Overline from Left</button>
        <button class="oline_right" type="button" name="button">Overline from Right</button>
        <button class="rou_cor" type="button" name="button">Round Corners</button>
        <button class="reveal" type="button" name="button">Reveal</button>
        <button class="und_reveal" type="button" name="button">Underline Reveal</button>
        <button class="over_reveal" type="button" name="button">Overline Reveal</button>
      </section>
      <section>
        <h1>Shadow Transitions</h1>
        <button class="shadow_bottom" type="button" name="button">Shadow Bottom</button>
        <button class="shadow_sides" type="button" name="button">Shadow Sides</button>
        <button class="shadow_grow" type="button" name="button">Grow Shadow</button>
        <button class="shadow_float" type="button" name="button">Float Shadow</button>
        <button class="shadow_glow" type="button" name="button">Glow</button>
        <button class="shadow_radial" type="button" name="button">Shadow Radial</button>
        <button class="shadow_outset" type="button" name="button">Shadow Outset</button>
        <button class="shadow_inset" type="button" name="button">Shadow Inset</button>
      </section>
      <section>
        <h1>Special Effects</h1>
        <button class="curl_left" type="button" name="button">Curl Top Left</button>
        <button class="curl_right" type="button" name="button">Curl Top Right</button>
        <button class="curl_bot_left" type="button" name="button">Curl Bottom Left</button>
        <button class="curl_bot_right" type="button" name="button">Curl Bottom Right</button>
        <button class="bub_top" type="button" name="button">Bubble Top</button>
        <button class="bub_right" type="button" name="button">Bubble Right</button>
        <button class="bub_bottom" type="button" name="button">Bubble Bottom</button>
        <button class="bub_left" type="button" name="button">Bubble Left</button>
        <button class="bub_fl_top" type="button" name="button">Bubble Float Top</button>
        <button class="bub_fl_right" type="button" name="button">Bubble Float Right</button>
        <button class="bub_fl_bottom" type="button" name="button">Bubble Float Bottom</button>
        <button class="bub_fl_left" type="button" name="button">Bubble Float Left</button>
      </section>
    
    
    
    
  
  
  
  
   
  </body></html>

Comments

Post a Comment