Skip to main content
HTML / CSS

3 Boutons créatifs en HTML / CSS

By 19 août 2021août 20th, 2021No Comments

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é !


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;
}
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%;
}
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.