Skip to main content

3 Boutons créatifs en HTML / CSS

3 Styles de bouton en HTML / CSS avec des effets modernes et subtils incluent l’effet actif et cliquer.

Pourquoi créer des boutons HTML / CSS sur WordPress ?

C’est vrai que les thèmes WordPress proposent déjà des boutons avec des effets de survol intéressants mais si comme moi vous en avez marre du style basique de Bootstrap et autres bibliothèques CSS et que vous aimerez peut-être incorporer des effets de survol avec l’état actif/pressé !

Bouton Style 1
HTML - Style 1 
<div class="btn-style1"><a href="#">Bouton Style 1</a></div>
CSS - Style 1 
.btn-style1 a{
    border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 15px 70px;
    display: inline-block;
    margin: 15px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
	-webkit-transition: none;
    -moz-transition: none;
    transition: none;
	background: #ffb001;
    color: #fff;
    box-shadow: 0 6px #df9c0a;
	border-radius: 100px;
}

.btn-style1 a:hover {
    box-shadow: 0 4px #c68b08;
    top: 2px;
}

.btn-style1 a:active {
	background:#f0a809;
    box-shadow: 0 0 #df9c0a;
    top: 6px;
}
Bouton Style 2
HTML - Style 2 
<div class="btn-style2"><a href="#">Bouton Style 2</a></div>
CSS - Style 2 
.btn-style2 a {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 15px 80px;
    display: inline-block;
    margin: 15px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
	border-radius: 50px;
    border: 3px solid #000;
    color: #000;
    overflow: hidden;
}

.btn-style2 a:before {
    left: 130%;
    top: -4px;
	position: absolute;
    height: 100%;
    font-size: 125%;
    line-height: 3.5;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
	font-family: FontAwesome;
	content: "\f178"
}

.btn-style2 a:hover {
	border-color: #000;
	color: #000;
	background: #fff
}

.btn-style2 a:active {
	-webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
	background: #000;
	color: #fff

}

.btn-style2 a:hover:before {
    left: 85%;
}
Bouton Style 3
HTML - Style 3 
<div class="btn-style3"><a href="#">Bouton Style 3</a></div>
CSS - Style 3 
.btn-style3 a {
    font-size: inherit;
    cursor: pointer;
    padding: 18px 80px;
    display: inline-block;
    margin: 15px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
	border-radius: 50px;
    color: #fff;
    overflow: hidden;
	background: #25221e
}

.btn-style3 a:after {
    width: 200px;
    height: 30px;
    background: rgba(255,255,255,0.3);
    opacity: 1;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    content: "";
    position: absolute;
    top: 50%;
    left: -50px;
    transition: all 0.5s ease !important;
}

.btn-style3 a:hover:after {
    top: 50%;
    left: 500px;
}

.btn-style3 a:hover {
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
	background:#35312c
}

.btn-style3 a:active {
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
	background:#000
}

J’utilise WordPress pour aider les entreprises à atteindre leurs objectifs.

Jetez un œil sur mon travail

WordPress

10 conseils pour créer un site internet efficace

@dmin-hous
@dmin-hous17 août 2021
WordPress

Gravity Forms : le meilleur plugin Premium pour WordPress

@dmin-hous
@dmin-hous20 août 2021