Vertical Shake

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{animation: vertical-shaking 0.55s infinite;}
                                    @keyframes vertical-shaking {
                                      0% { transform: translateY(0) }
                                      25% { transform: translateY(5px) }
                                      50% { transform: translateY(-5px) }
                                      75% { transform: translateY(5px) }  
                                      100% { transform: translateY(0) }
                                    }

Horizontal Shake

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{animation: horizontal-shaking 0.55s infinite;}
                                    @keyframes horizontal-shaking {
                                      0% { transform: translateX(0) }
                                      25% { transform: translateX(5px) }
                                      50% { transform: translateX(-5px) }
                                      75% { transform: translateX(5px) }
                                      100% { transform: translateX(0) }
                                    }

Jump & Shake

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                      animation: jump-shaking 0.83s infinite;
                                    }
                                    
                                    @keyframes jump-shaking {
                                      0% { transform: translateX(0) }
                                      25% { transform: translateY(-9px) }
                                      35% { transform: translateY(-9px) rotate(17deg) }
                                      55% { transform: translateY(-9px) rotate(-17deg) }
                                      65% { transform: translateY(-9px) rotate(17deg) }
                                      75% { transform: translateY(-9px) rotate(-17deg) }
                                      100% { transform: translateY(0) rotate(0) }
                                    }

Skewed Shaking H

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{animation: skew-x-shake 1.3s infinite;}
                                                                        @keyframes skew-x-shake {
                                                                        0% { transform: skewX(-15deg); }
                                                                        5% { transform: skewX(15deg); }
                                                                        10% { transform: skewX(-15deg); }
                                                                        15% { transform: skewX(15deg); }
                                                                        20% { transform: skewX(0deg); }
                                                                        100% { transform: skewX(0deg); }  
                                                                        }

Skewed Shaking V

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{animation: skew-y-shake 1.3s infinite;}
                                    
                                    @keyframes skew-y-shake {
                                      0% { transform: skewY(-15deg); }
                                      5% { transform: skewY(15deg); }
                                      10% { transform: skewY(-15deg); }
                                      15% { transform: skewY(15deg); }
                                      20% { transform: skewY(0deg); }
                                      100% { transform: skewY(0deg); }  
                                    }

Constant Tilt

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only {animation: tilt-shaking 0.3s infinite;}
                                    
                                    @keyframes tilt-shaking {
                                      0% { transform: rotate(0deg); }
                                      25% { transform: rotate(5deg); }
                                      50% { transform: rotate(0eg); }
                                      75% { transform: rotate(-5deg); }
                                      100% { transform: rotate(0deg); }
                                    }

Vertical Shake

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation: vertical-shaking 0.55s infinite;}
                                    @keyframes vertical-shaking {
                                      0% { transform: translateY(0) }
                                      25% { transform: translateY(5px) }
                                      50% { transform: translateY(-5px) }
                                      75% { transform: translateY(5px) }  
                                      100% { transform: translateY(0) }
                                    }

Horizontal Shake

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation: horizontal-shaking 0.55s infinite;}
                                    @keyframes horizontal-shaking {
                                      0% { transform: translateX(0) }
                                      25% { transform: translateX(5px) }
                                      50% { transform: translateX(-5px) }
                                      75% { transform: translateX(5px) }
                                      100% { transform: translateX(0) }
                                    }

Jump & Shake

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{
                                      animation: jump-shaking 0.83s infinite;
                                    }
                                    
                                    @keyframes jump-shaking {
                                      0% { transform: translateX(0) }
                                      25% { transform: translateY(-9px) }
                                      35% { transform: translateY(-9px) rotate(17deg) }
                                      55% { transform: translateY(-9px) rotate(-17deg) }
                                      65% { transform: translateY(-9px) rotate(17deg) }
                                      75% { transform: translateY(-9px) rotate(-17deg) }
                                      100% { transform: translateY(0) rotate(0) }
                                    }

Skewed Shaking H

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation: skew-x-shake 1.3s infinite;}
                                    
                                    @keyframes skew-x-shake {
                                      0% { transform: skewX(-15deg); }
                                      5% { transform: skewX(15deg); }
                                      10% { transform: skewX(-15deg); }
                                      15% { transform: skewX(15deg); }
                                      20% { transform: skewX(0deg); }
                                      100% { transform: skewX(0deg); }  
                                    }

Skewed Shaking V

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation: skew-y-shake 1.3s infinite;}
                                    
                                    @keyframes skew-y-shake {
                                      0% { transform: skewY(-15deg); }
                                      5% { transform: skewY(15deg); }
                                      10% { transform: skewY(-15deg); }
                                      15% { transform: skewY(15deg); }
                                      20% { transform: skewY(0deg); }
                                      100% { transform: skewY(0deg); }  
                                    }

Constant Tilt

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation: tilt-shaking 0.3s infinite;}
                                    
                                    @keyframes tilt-shaking {
                                      0% { transform: rotate(0deg); }
                                      25% { transform: rotate(5deg); }
                                      50% { transform: rotate(0eg); }
                                      75% { transform: rotate(-5deg); }
                                      100% { transform: rotate(0deg); }
                                    }

Inclinaison Droite

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.${transform: skewX(-20deg)}

Remuer

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {animation: wiggle 2s linear infinite;}
                                    @keyframes wiggle {
                                      0%, 7% {transform: rotateZ(0);}
                                      15% {transform: rotateZ(-15deg);}
                                      20% {transform: rotateZ(10deg);}
                                      25% { transform: rotateZ(-10deg);}
                                      30% {transform: rotateZ(6deg);}
                                      35% {transform: rotateZ(-4deg);}
                                      40%, 100% {transform: rotateZ(0);}}

Effet Survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only {box-shadow: 0 0 1px #ccc;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: linear!important;box-shadow:0px 0 0 #fff inset;}
                                    .$ .wa-btn-text-only:hover{-webkit-box-shadow: -200px 0 0 #320126 inset;}

Zoom Survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{-webkit-transform: scale(1.2);transform: scale(1.2);}

Ombre Bouton

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {filter: drop-shadow(5px 5px 2px #757575);}

Inclinaison Gauche

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.${transform: skewX(20deg)}

Flash halo

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                    	
                                    animation:nom_anim_bouton1 1s infinite alternate
                                    	
                                    	}
                                    
                                    @keyframes nom_anim_bouton1{
                                    	
                                    from{
                                    	
                                    	box-shadow:0 0 5px #6078ea
                                    	
                                    	}
                                    	
                                    to{
                                    	
                                    	box-shadow:0 0 15px hsl(230, 77%, 25%) 
                                    	
                                    	}
                                    	
                                    	}

Flash Survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation:nom_anim_bouton1 1s infinite alternate}
                                    
                                    @keyframes nom_anim_bouton1{
                                    
                                    from{box-shadow:0 0 5px #6078ea}
                                    
                                    to{box-shadow:0 0 15px hsl(230, 77%, 25%) }
                                    }

Pulsion survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{animation:pulsation_bouton .8s ease-out}
                                    
                                    @keyframes pulsation_bouton {
                                    
                                    from{box-shadow:0 0 0 -3px hsla(0,0%,100%,0),0 0 0 0 hsl(44,66%,57%)}
                                    to{box-shadow:0 0 0 10px hsla(0,0%,100%,0),0 0 0 13px hsla(0,0%,100%,0)}}

Effet pulsion

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{animation:pulsation_bouton 1s infinite alternate}
                                    
                                    @keyframes pulsation_bouton {
                                    
                                    from{box-shadow:0 0 0 -3px hsla(0,0%,100%,0),0 0 0 0 hsl(44,66%,57%)}
                                    to{box-shadow:0 0 0 10px hsla(0,0%,100%,0),0 0 0 13px hsla(0,0%,100%,0)}}

Multi Ombres

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{box-shadow: 2px 2px #1c87c9, 4px 4px #ccc, 6px 6px #8ebf42;}

Multi ombre survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{box-shadow: 2px 2px #1c87c9, 4px 4px #ccc, 6px 6px #8ebf42;}

Change couleur

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                          animation: element 4s infinite;
                                          }
                                          @keyframes  element {
                                          0% { background-color: #8ebf42; }
                                          50% { background-color: #1c87c9; }
                                          100% { background-color: #d5dce8; }
                                          }

Dezoom survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {-webkit-transform: scale(1.0);
                                    transform: scale(1.0);
                                    -webkit-transition: .3s ease-in-out;
                                    transition: .3s ease-in-out;
                                    }
                                    .$:hover{
                                    -webkit-transform: scale(.8);
                                    transform: scale(.8);}

Halo survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$:hover{filter: drop-shadow(0px 0px 4px #bd9334);}

Shakewa

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                      animation: horizontal-shaking 0.35s infinite;
                                    }
                                    
                                    @keyframes horizontal-shaking {
                                      0% { transform: translateX(0) }
                                      25% { transform: translateX(5px) }
                                      50% { transform: translateX(-5px) }
                                      75% { transform: translateX(5px) }
                                      100% { transform: translateX(0) }
                                    }

Ombre survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ :Hover{filter:drop-shadow(-2px 2px 2px #757575);}

Bouge en bas

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {animation: hu__hu__ infinite 2s ease-in-out}
                                    @keyframes hu__hu__ {50% { transform: translateY(30px)}}

Flou survol

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ :hover{
                                    -webkit-filter: blur(3px);
                                    filter: blur(3px);
                                    -webkit-transition: .3s ease-in-out;
                                    transition: .3s ease-in-out;
                                    }

Inclinaison gauche

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{
                                      -webkit-transform: rotate(-10deg);}

Inclinaison droite

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{
                                      -webkit-transform: rotate(10deg);}

tourbillon

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only:hover{
                                    -webkit-transform: rotate(-360deg);
                                    }

Clignotant

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                      animation-name: clin;
                                      animation-duration: 1s;
                                      animation-iteration-count: infinite;
                                    }
                                    @keyframes clin {
                                      from {background-color: #e85265;}
                                      to {background-color: #320126;}
                                    }

Ombre nette

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

                                    .$ .wa-btn-text-only{box-shadow: 3px 3px;}

Double bordure

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                    border-width:5px;
                                    border-style:double;
                                    border-color:black;
                                    }

Mutli bordure

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                    border-width:1px 1px 5px 1px;
                                    }

Bordure poitillée

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                     border-width:3px;
                                     border-style:dotted;
                                     }

Bordure en tirets

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                    border-width:3px;
                                    border-style:dashed;
                                    border-color:black;
                                    }

Bords différents

BOUTON

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ .wa-btn-text-only{
                                    border-width:3px 3px 3px 3px;
                                    border-style:solid dotted;
                                    padding:0 10px;
                                    }

Différentes bordures à un même Bouton

Lorsqu'on indique plusieurs valeurs différentes à la même propriété, la 1ére est celle qui va être appliquée en haut, puis on tourne dans le sens des aiguilles d'une montre. Quand on en indique que deux, la première concerne le haut et le bas, la seconde la droite et la gauche.

Effets CSS Boutons

Tutoriel vidéo

Vertical Shake

Horizontal Shake

Jump & Shake

Skewed Shaking H

Skewed Shaking V

Constant Tilt

Vertical Shake

Horizontal Shake

Jump & Shake

Skewed Shaking H

Skewed Shaking V

Constant Tilt

Inclinaison Droite

Remuer

Effet Survol

Zoom Survol

Ombre Bouton

Inclinaison Gauche

Flash halo

Flash Survol

Pulsion survol

Effet pulsion

Multi Ombres

Multi ombre survol

Change couleur

Dezoom survol

Halo survol

Shakewa

Ombre survol

Bouge en bas

Flou survol

Inclinaison gauche

Inclinaison droite

tourbillon

Clignotant

Ombre nette

Double bordure

Mutli bordure

Bordure poitillée

Bordure en tirets

Bords différents

Soutenez mon travail.