BIENVENUE DANS BOUTONS CSS PACK
Créé Des Appels à Action Uniques Grâce A La Magie Du CSS
COMMENT UTILISER LE CSS DANS SYSTEME.IO ET CLICKFUNNELS
Ce contenu est la propriété intellectuelle privée de l'entreprise Funnelity, page à ne pas partager.
BOUTONS CSS PACK
<style>
button {
background: rgb(47,203,253);
background: linear-gradient(90deg, rgba(47,203,253,1) 0%, rgba(79,85,246,1) 100%);
}
</style>
<style>
button { margin-top: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
button:hover { margin-top: -10px; margin-bottom: 10px;}
</style>
<style>
button{
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #23c483;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}
button:active {
transform: translateY(-1px);
}
</style>
<style>
button {
border: unset;
z-index: 1;
position: relative;
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms;
overflow: hidden;
}
button::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #212121;
z-index: -1;
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms
}
button:hover {
color: #e8e8e8;
}
button:hover::before {
width: 100%;
}
</style>
<style>
button {
--green: #1BFD9C;
position: relative;
overflow: hidden;
transition: all 0.3s;
border: 2px solid var(--green);
background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%);
color: var(--green);
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}
button:hover {
color: #82ffc9;
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}
button:before {
content: "";
position: absolute;
left: -4em;
width: 4em;
height: 100%;
top: 0;
transition: transform .4s ease-in-out;
background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%);
}
button:hover:before {
transform: translateX(15em);
}
</style>
<style>
button{
border: 3px solid black;
box-shadow: 0.1em 0.1em;
transition: .1s ease-in-out;
}
button:hover {
transform: translate(-0.05em, -0.05em);
box-shadow: 0.15em 0.15em #000000 ;
}
button:active {
transform: translate(0.05em, 0.05em);
box-shadow: 0.05em 0.05em;
}
</style>
<style>
button {
--color: #3992e6;
position: relative;
z-index: 1;
}
button::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: transparent;
top: -7px;
left: -7px;
z-index: -5;
border-top: 3px solid var(--color);
border-left: 3px solid var(--color);
transition: 0.5s;
}
button::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: transparent;
bottom: -7px;
right: -7px;
z-index: -5;
border-right: 3px solid var(--color);
border-bottom: 3px solid var(--color);
transition: 0.5s;
}
button:hover::before {
width: 100%;
height: 100%;
}
button:hover::after {
width: 100%;
height: 100%;
}
button {
border: none;
cursor: pointer;
}
</style>
<style>
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
}
button {
border: 2px solid #b18597;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}
button::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f9c4d2;
border-radius: inherit;
box-shadow: 0 0 0 2px #b18597;
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button:hover {
background: #ffe9e9;
transform: translate(0, 0.25em);
}
button:hover::before {
box-shadow: 0 0 0 2px #b18597;
transform: translate3d(0, 0.5em, -1em);
}
button:active {
background: #ffe9e9;
transform: translate(0em, 0.75em);
}
button:active::before {
transform: translate3d(0, 0, -1em);
}
</style>
<style>
button {
border: 3px solid #fa725a;
transition: ease-in-out 0.3s;
background-color: transparent;
}
button:hover {
transform: scale(1.1) rotate(10deg);
background-color: #fa725a;
color: white;
}
</style>
<style>
button {
border: none;
transition: .3s;
}
button:hover {
background-color: #3b82f6;
box-shadow: 0 0 0 5px #3b83f65f;
color: #fff;
}
</style>
<style>
button {
cursor: pointer;
position: relative;
border: none;
background: none;
text-transform: uppercase;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: color;
}
button:focus,
button:hover {
color: #000000;
}
button:focus:after,
button:hover:after {
width: 100%;
left: 0%;
}
button:after {
content: "";
pointer-events: none;
bottom: -2px;
left: 50%;
position: absolute;
width: 0%;
height: 2px;
background-color: #000000;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: width, left;
}
</style>
<style>
button {
background: transparent;
border: none;
position: relative;
color: #f0f0f0;
z-index: 1;
}
button::after,
button::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all .4s;
}
button::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: #28282d;
border-radius: 10px;
}
button::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
border-radius: 50px;
}
button:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
}
button:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
button:active::after {
transition: 0s;
transform: translate(0, 5%);
}
</style>
<style>
button {
border: 2px solid blueviolet;
background: rgb(255, 255, 255);
transition-duration: 1s;
transition-property: border-top,
border-left,
border-bottom,
border-right,
box-shadow;
}
button:hover {
border-top: 2px solid blueviolet;
border-left: 2px solid blueviolet;
border-bottom: 2px solid rgb(238, 103, 238);
border-right: 2px solid rgb(238, 103, 238);
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
}
</style>
<style>
button{
background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));
border: 2px solid rgb(50, 50, 50);
border-bottom: 5px solid rgb(50, 50, 50);
box-shadow: 0px 1px 6px 0px rgb(158, 129, 254);
transform: translate(0, -3px);
transition: 0.2s;
transition-timing-function: linear;
}
button:active {
transform: translate(0, 0);
border-bottom: 2px solid rgb(50, 50, 50);
}
</style>
<style>
button{
box-shadow: 0px 8px 15px rgba(0,160,255,0.3);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #212121;
box-shadow: 0px 15px 20px rgba(0,0,0,0.27);
color: #fff;
transform: translateY(-7px);
}
button:active {
transform: translateY(-1px);
}
</style>
<style>
button{
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #f71b36;
box-shadow: 0px 15px 20px rgba(247,27,54,0.2);
color: #fff;
transform: translateY(-7px);
}
button:active {
transform: translateY(-1px);
}
</style>
<style>
button {
border: 3px solid #23c483;
transition: ease-in-out 0.3s;
background-color: transparent;
}
button:hover {
transform: scale(1.1) rotate(-10deg);
background-color: #23c483;
color: white;
}
</style>
<style>
button {
text-decoration: none;
border: none;
background: none;
}
button::before {
margin-left: auto;
}
button::after, button::before {
content: '';
width: 0%;
height: 3px;
background: #f44336;
display: block;
transition: 0.5s;
}
button:hover::after, button:hover::before {
width: 100%;
}
</style>
<style>
button {
color: #ecf0f1;
background-color: #e67e22;
border: 1px solid #f39c12;
box-shadow: 0px 6px 0px #d35400;
transition: all .1s;
}
button:active {
box-shadow: 0px 2px 0px #d35400;
position: relative;
top: 2px;
}
</style>
<style>
button {
outline: none;
color: #f99709;
padding: 1em;
padding-left: 3em;
padding-right: 3em;
border: 2px dashed #f99709;
background-color: #fef5e8;
box-shadow: 0 0 0 4px #FEF5E8, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
transition: .1s ease-in-out, .4s color;
}
button:active {
transform: translateX(0.1em) translateY(0.1em);
box-shadow: 0 0 0 4px #FEF5E8, 1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5);
}
</style>
<style>
button {
border: 1px solid #2C22DF;
box-shadow: 0px 6px 0px #2c22df;
transition: all .1s;
}
button:active {
box-shadow: 0px 2px 0px #2c22df;
position: relative;
top: 2px;
}
</style>
<style>
button {
border: none;
display: inline-block;
text-transform: uppercase;
cursor: pointer;
transform: skew(-15deg);
}
button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 0;
background: rgb(20, 20, 20);
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
button:hover {
color: #fff;
}
button:hover::before {
left: 0;
right: 0;
opacity: 1;
}
</style>
<style>
button {
border: none;
display: inline-block;
text-transform: uppercase;
cursor: pointer;
transform: skew(-15deg);
}
span {
display: inline-block;
transform: skew(15deg);
}
button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 0;
background: rgb(20, 20, 20);
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
button:hover {
color: #fff;
}
button:hover::before {
left: 0;
right: 0;
opacity: 1;
}
</style>
<style>
button {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
transform: skew(-15deg);
}
span {
display: inline-block;
transform: skew(15deg);
}
button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 0;
background: #ffffff;
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
button:hover {
color: #000000;
}
button:hover::before {
left: 0;
right: 0;
opacity: 1;
}
</style>
<style>
button {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
transform: skew(-15deg);
}
button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 0;
background: #ffffff;
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
button:hover {
color: #000000;
}
button:hover::before {
left: 0;
right: 0;
opacity: 1;
}
</style>
<style>
button {
--c: #ffffff;
background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
#004dff;
color: #0000;
border: none;
transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0 var(--c),
calc(var(--_i,-1)*-0.08em) .01em 2px #0004;
outline-offset: .1em;
transition: 0.3s;
}
button:hover,
button:focus-visible {
--_p: 0%;
--_i: 1;
}
button:active {
box-shadow: inset 0 0 9e9q #0005;
transition: 0s;
}
button {
margin: 0;
cursor: pointer;
}
</style>
<style>
button {
background: transparent;
border: none;
position: relative;
color: #f0f0f0;
z-index: 1;
}
button::after,
button::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all .4s;
}
button::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: #004DFF;
border-radius: 10px;
}
button::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
border-radius: 50px;
}
button:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
}
button:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
button:active::after {
transition: 0s;
transform: translate(0, 5%);
}
</style>
<style>
button {
--width: 250px;
--timing: 4s;
border: 0;
background: #09bd02;
transition: all 0.2s;
}
button:hover {
background-image: linear-gradient(to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100%);
animation: var(--timing) linear dance6123 infinite;
transform: scale(1.1) translateY(-1px);
}
@keyframes dance6123 {
to {
background-position: var(--width);
}
}
</style>
<style>
button {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
transform: skew(-15deg);
}
button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 0;
background: #FFD705;
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
button:hover {
color: #000000;
}
button:hover::before {
left: 0;
right: 0;
opacity: 1;
}
</style>
<style>
button {
display: inline-block;
border: none;
background-color: #f44336;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
button:hover {
background-color: #fff;
color: #f44336;
text-shadow: 0 0 5px #f44336;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
button{
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
button{
transform: rotate(-10deg) ;
}
</style>
<style>
button {
border: 2px solid #fff;
color: #131313;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
background-color: #FFD705;
font-weight: bolder;
box-shadow: 0 2px 0 2px #000;
}
button:before {
content: "";
position: absolute;
width: 100px;
height: 250%;
background-color: #ff6700;
top: 50%;
transform: skewX(30deg) translate(-250%, -50%);
transition: all 0.5s;
}
button:hover {
background-color: #4cc9f0;
color: #fff;
box-shadow: 0 2px 0 2px #0d3b66;
}
button:hover::before {
transform: skewX(30deg) translate(250%, -50%);
transition-delay: 0.1s;
}
button:active {
transform: scale(0.9);
}
</style>
<style>
button {
display: inline-block;
border: none;
background-color: #f44336;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
button:hover {
background-color: #fff;
color: #f44336;
text-shadow: 0 0 5px #f44336;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
button{
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
</style>
<style>
button {
cursor: pointer;
border: none;
position: relative;
background: #100720;
transition: 0.1s;
}
button::after {
content: '';
width: 100%;
height: 100%;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
filter: blur(15px);
z-index: -1;
position: absolute;
left: 0;
top: 0;
}
button:active {
transform: scale(0.9) rotate(3deg);
background: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
transition: 0.5s;
}
</style>
<style>
button {
outline: none;
border: 2px solid black;
background-color: white;
position: relative;
}
button::before {
position: absolute;
top: -14%;
left: 7%;
background-color: black;
width: 100%;
height: 100%;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: 0.15s ease-in-out;
}
button::before {
top: 0;
left: 0;
}
</style>
<style>
button {
background-image: linear-gradient( rgba(255,94,247,1) 18%, rgba(2,245,255,1) 100% ) ;
}
button:hover {
transform: scale(0.9) rotate(3deg);
transition: 0.5s;
}
</style>
<style>
button { margin-left: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
button:hover { margin-left: -10px; margin-right: 10px;}
</style>
<style>
button { margin-right: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
button:hover { margin-right: -10px; margin-left: 10px;}
</style>
<style>
button {
background: transparent;
border: none;
position: relative;
color: #f0f0f0;
z-index: 1;
}
button::after,
button::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all .4s;
}
button::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: #15d10e;
border-radius: 10px;
}
button::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
border-radius: 50px;
}
button:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
}
button:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
button:active::after {
transition: 0s;
transform: translate(0, 5%);
}
</style>
<style>
button {
position: relative;
border: 0;
background: rgb(148, 1, 1);
overflow: hidden;
transition: 0.3s ease-in-out;
}
button:hover {
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.562);
transform: scale(1.01);
box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);
}
button::after {
content: "";
position: absolute;
top: 0;
left: -100px;
width: 50%;
height: 100%;
transform: rotate(80deg);
background: #ffffff77;
filter: blur(10px);
transition: 0.6s ease-in-out;
}
button:hover::after {
left: 100%;
}
</style>
<style>
button {
background: transparent;
border: none;
position: relative;
transition: .5s ease;
}
button::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: #ffc506;
transition: .5s ease;
}
button:hover {
color: #1e1e2b;
transition-delay: .5s;
}
button:hover::before {
width: 100%;
}
button::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 0;
width: 100%;
background-color: #ffc506;
transition: .4s ease;
z-index: -1;
}
button:hover::after {
height: 100%;
transition-delay: 0.4s;
color: aliceblue;
}
</style>
<style>
button {
background: transparent;
border: none;
position: relative;
transition: .5s ease;
}
button::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: #2C22DF;
transition: .5s ease;
}
button:hover {
color: #2C22DF;
transition-delay: .5s;
}
button:hover::before {
width: 100%;
}
button::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 0;
width: 100%;
background-color: #2C22DF;
transition: .4s ease;
z-index: -1;
}
button:hover::after {
height: 100%;
transition-delay: 0.4s;
color: aliceblue;
}
</style>