Boutons CSS

.bouton {
pointer-events: auto;
cursor: pointer;
background: transparent;
padding:1em 2.5em;
margin: 0;
position: relative;
display: inline-block;
overflow: hidden;
color: #fff !important;
z-index: 0;
border:1px solid black;
}

.bouton::before {
content: '';
background: #000;
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.bouton:hover {
color: black !important;
}

.bouton:hover:before {
transform: translate3d(0,-100%,0);
}

Deuxième bouton

.bouton {
pointer-events: auto;
cursor: pointer;
background: transparent;
padding: 1em 2.5em;
margin: 0;
position: relative;
display: inline-block;
overflow: hidden;
color: #fff !important;
z-index: 0;
}

.bouton::before {
content: '';
background: #000;
transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 190%;
z-index: -1;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
}

.bouton:hover {
color: black !important;
background: #d3d3d3;
}

.bouton:hover:before {
transform: translate3d(100%,-100%,0);
}

Troisième bouton

.bouton {
display: inline-block;
text-transform: uppercase;
font-size: .875rem;
font-weight: 600;
width: auto;
padding: 10px 20px;
cursor: pointer;
background: rgba(0,0,0,0);
border: 2px solid black;
position: relative;
color: black !important;
}

.bouton::before {
top: -2px;
left: -webkit-calc(90% - 15px);
left: -moz-calc(90% - 15px);
left: calc(90% - 15px);
content: "";
display: block;
width: 8px;
height: 2px;
background-color: #fff;
position: absolute;
-webkit-transition: left .4s;
-o-transition: left .4s;
-moz-transition: left .4s;
transition: left .4s;
}

.bouton::after {
bottom: -2px;
left: -webkit-calc(10% + 5px);
left: -moz-calc(10% + 5px);
left: calc(10% + 5px);
content: "";
display: block;
width: 8px;
height: 2px;
background-color: #fff;
position: absolute;
-webkit-transition: left .4s;
-o-transition: left .4s;
-moz-transition: left .4s;
transition: left .4s;
}

.bouton:hover:before {
left: -webkit-calc(10% + 5px);
left: -moz-calc(10% + 5px);
left: calc(10% + 5px);
}

.bouton:hover:after {
left: -webkit-calc(90% - 15px);
left: -moz-calc(90% - 15px);
left: calc(90% - 15px);
}

Quatrième bouton

.bouton {
font-weight: bold;
text-transform: uppercase;
color:black !important;
}

.bouton::before {
content: '';
display: inline-block;
height: 45px;
width: 45px;
border-radius: 100%;
border: 2px solid red;
position: relative;
z-index: -1;
left: 1.8em;
top: 2.6em;
transform: translateY(-50%);
transition: .4s ease;
margin-top: -3em;
}

.bouton:hover:before {
transform: translateY(-50%) scale(1.2);
}

Cinquième bouton

.bouton {
text-transform: uppercase;
display: inline-block;
height:40px;
line-height: 40px;
padding: 0 20px;
position: relative;
color: black !important;
z-index: 1
}

.bouton::before {
content: "";
display: block;
height:40px;
width:40px;
border-radius:40px;
background:red;
position: absolute;
z-index: -1;
left: 0;
transition: .2s ease;
}

.bouton:hover {
color: white !important;
}

.bouton:hover:before {
width:100%;
}

Sixième bouton

.bouton {
text-transform: uppercase;
display: inline-block;
height:40px;
line-height: 40px;
padding: 0 20px;
position: relative;
color: black !important;
z-index: 1
}

.bouton::before {
content: "";
display: block;
height:40px;
width:40px;
border-radius:40px;
background:red;
position: absolute;
z-index: -1;
left: 0;
transition: .2s ease;
}

.bouton:hover:before {
left:90%;
}

Septième bouton

.bouton {
width: auto;
border: none;
color: #fff !important;
cursor: pointer;
background: black;
font-weight: 700;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
position: relative;
padding: 20px 35px;
margin: 10px 0 0 7px;
display: inline-block;
line-height: 1;
-webkit-transition: 0.2s ease;
-o-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}

.bouton::after {
content: "";
border: 2px solid black;
left: -9px !important;
width: 100% !important;
bottom: -10px !important;
height: 100% !important;
position: absolute !important;
display: inline-block !important;
background-color: transparent !important;
-webkit-transition: 0.2s ease;
-o-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}

.bouton:hover:after {
left:-2px !important;
bottom:-2px !important;
}

Huitième bouton

.bouton {
padding:13px 50px 13px;
outline: 0;
border:1px solid black;
cursor: pointer;
position: relative;
background-color: rgba(0, 0, 0, 0);
text-transform: uppercase;
color: black !important;
display: inline-block;
}

.bouton::after {
content: "";
background-color: red;
width: 100%;
z-index: -1;
position: absolute;
height: 100%;
top:7px;
left:7px;
transition: 0.2s;
}

.bouton:hover:after {
left:0px;
top:0px;
}

Neuvième bouton

.bouton {
display: inline-block;
text-transform: uppercase;
margin:10px;
cursor: pointer;
color: red !important;
font-weight: bold;
padding:15px;
background: repeating-linear-gradient(180deg,#0000 0 2.5%, red 0 5% ,#0000 0 10%) top left , repeating-linear-gradient(-90deg,#0000 0 5% ,red 0 7.5%, #0000 0 10%) top right , repeating-linear-gradient( 0deg,#0000 0 7.5%,red 0 10% ) bottom right, repeating-linear-gradient(90deg, red 0 2.5%,#0000 0 10%) bottom left;
background-size:3px 4000%,4000% 3px;
background-repeat: no-repeat;
transition: 0s 9999s;
}

.bouton:hover {
background-position: bottom left,top left,top right,bottom right;
transition: 15s linear;
}

Dixième bouton

.bouton {
background-color: transparent;
padding: 10px 30px 9px;
display: inline-block;
border: 1px solid black;
color: black !important;
vertical-align: top;
margin-top: 10px;
transition: .5s ease;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.bouton::before {
content: '';
display: inline-block;
height: 18px;
width: 2px;
background-color: black;
position: relative;
left: 50%;
top: -1.6em;
transition: .5s ease;
}

.bouton:hover:before {
top:1.8em;
}

Option fond de couleur
.bouton:hover{
background-color: black;
color: white !important;
}

Onzième bouton

.bouton {
display: inline-block;
position: relative;
padding: 15px 35px;
border: 1px solid black;
cursor: pointer;
font-weight: 700;
color: black !important;
text-align: center;
-webkit-appearance: none !important; transition: .2s ease;
}

.bouton::before {
content: '';
display: block;
position: absolute;
width:50px;
height:1px;
background-color: black;
left:-35px;
top: calc(50% - 1px);
transition: .2s ease;
}

.bouton:hover:before {
left: calc(100% - 15px);
}

Option fond de couleur
.bouton:hover{
background-color: black;
color: white !important;
}

Douzième bouton

.bouton {
background-image: linear-gradient(black 0 0), linear-gradient(black 0 0);
background-repeat: no-repeat;
background-size: 50% 0.08em;
background-position: -100% 100%, 200% 0;
transition: background-size .3s, background-position .3s .3s;
padding: 10px 20px;
color: black !important;
}

.bouton:hover {
background-size: 51% 100%;
background-position: 0 100%, 100% 0;
transition: background-size .3s .3s, background-position .3s;
color:white !important;
}

Treizième bouton

.bouton {
background: transparent;
padding:10px 20px;
line-height: 20px;
transition: all .4s;
color: black !important;
display: inline-block;
background-repeat: no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-position-x: 0,0;
background-position-y: 100%;
background-size: 100% 1.3em;
background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(122 122 122 / 50%)),to(rgb(122 122 122 / 50%)));
background-image: -webkit-linear-gradient(top,rgb(122 122 122 / 50%),rgb(122 122 122 / 50%));
background-image: linear-gradient(180deg ,rgb(122 122 122 / 50%),rgb(122 122 122 / 50%));
}

.bouton:hover {
background-image: linear-gradient(180deg
,rgb(122 122 122 / 50%),rgb(122 122 122 / 50%)) !important;
background-color: transparent !important;
transition: all .4s;
background-position-x: 0,0;
background-position-y: 100%;
background-repeat: no-repeat;
background-size: 100% 3.3em;
}

Quartozième bouton

.bouton {
text-transform: uppercase;
color: black !important;
letter-spacing: 0.1em;
font-weight: bold;
}

.bouton::before {
content: '';
display: inline-block;
height:2px;
width:18px;
background-color: black;
position: relative;
left: -1%;
transition: .5s ease;
top:-4px;
}

.bouton:hover:before {
left: 2%;
opacity: 0;
}

.bouton:after {
content: url(/template/fleche.png);
display: inline-block;
right: 0%;
transition: .5s ease;
position: relative;
opacity: 0;
top:12px;
}

.bouton:hover:after{
opacity: 1;
right: -1%;
}

Quinzième bouton

.bouton {
position: relative;
padding:20px 20px;
color: black !important;
transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) !important;
display: inline-block;
}

.bouton:hover {
color: white !important;
transition-delay: .5s !important;
}

.bouton::before {
content: '';
position: absolute;
transition: inherit;
z-index: -1;
top: 0;
left: 35%;
height: 99%;
width: 30%;
border:1px solid black;
border-left: 0;
border-right: 0;
}

.bouton:after {
content: '';
position: absolute;
transition: inherit;
z-index: -1;
bottom: 0;
left: 0;
height: 0%;
width: 100%;
background: black;
}

.bouton:hover:before {
transition-delay: 0s;
left: 0;
width: 100%;
}

.bouton:hover:afterbackground: black;
transition-delay: .35s;
top: 0;
height: 100%;
}

Seizième bouton

.bouton {
background: linear-gradient(black 0 0) 0 100%, linear-gradient(black 0 0) 0 100%, linear-gradient(black 0 0) 100% 100%, linear-gradient(black 0 0) 100% 100%; background-size: var(--p, 50%) 2px, 2px var(--d, 0);
background-repeat: no-repeat;
transition: 0.5s !important;
padding: 10px;
color: black !important;
}

.bouton:hover{
--d: 100%;
--p: 0%;
color: black !important;
}

Dix septième bouton

.bouton {
padding-bottom:8px;
background:radial-gradient( circle closest-side, black 80%, #ffffff00 ) bottom / 5px 5px no-repeat, radial-gradient(circle closest-side, black 80%, #ffffff00) bottom / 5px 5px no-repeat, linear-gradient(black 0 0) bottom left / var(--d, 0%) 5px no-repeat, linear-gradient(black 0 0) bottom right/var(--d, 0%) 5px no-repeat;
transition:0.3s, background-position 0.3s 0.3s;
color:black !important
}

.bouton:hover{
--d: 100%;
background-position: bottom left, bottom right;
transition: 0.3s, background-size 0.3s 0.3s;
}

Dix huitième bouton

.bouton {
background: radial-gradient(50% 100% at 50% -5px ,#0000 calc(100% - 4px), black calc(100% - 3px) calc(100% - 1px),#0000) 0 100%, radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), black calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
background-size:20px 10px;
background-repeat: repeat-x;
-webkit-mask: linear-gradient(#fff 0 0) top /100% calc(100% - 13px), linear-gradient(#fff 0 0) var(--p,-40px) 100%/ 104px 13px;
-webkit-mask-repeat: no-repeat;
transition: 0s;
display: inline-block;
text-transform: uppercase;
margin: 10px;
cursor: pointer;
color: black !important;
font-weight: bold;
padding: 15px;
}

.bouton:hover {
--p: calc(100% + 40px);
transition: 0.8s linear;
}

RETOUR

Dix-neuvième

.bouton {
background: none !important;
color: #fff;
font-family: iransans-light;
border-radius: 22px;
transition: 0.35s;
position: relative;
overflow: visible;
margin: 0 5px;
border-radius: 30px;
}

.bouton:before{
width: 0%;
border: 1px solid rgba(255, 255, 255, 0);
top: 0px;
right: 0px;
-webkit-transition-delay: 0.05s;
transition-delay: 0.25s;
bottom: 0px;
content: '';
position: absolute;
z-index: 5;
border-radius: 30px;
transition: 0.35s;
}

.bouton:hover:before{

left:0;
width:100%;
opacity:1;
border-color:#111;
transition:0.35s;

}

RETOUR