---
title: "Effets de survol de boutons"
subtitle: "Simples mais efficaces."
lang: fr
slug: "buttons"
draft: true
excerpt: Quelques effets de survol faciles à récupérer et utiliser.
tags: ["CSS"]
type: fragments
code: true
createdAt: "2020-10-08T09:00:00.000Z"
---

## Styles généraux

Tous les boutons présents utilisent ces styles comme base en guise de « reset » :

> N'oubliez pas de préfixer si besoin !

```css
.btn {
	margin: 20px 0;
	padding: 12px 26px;
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-size: 20rem; /* 20px */
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	border: none;
	border-radius: 2px;
	-moz-appearance: none;
	-webkit-appearance: none;
	color: white;
	background-color: hotpink;
	transition: background-color 0.3s ease;
}
```

## Ajout d'icône

<button role="none" class="btn btn-icon">
	<span>Icône</span>
</button>

```css
.btn-icon {
	background-color: hotpink;
}
.btn-icon::before {
	content: url("~assets/svg/arrow-right-white.svg");
	position: absolute;
	width: 20px;
	top: 50%;
	right: 0;
	transform: translate(40px, -50%);
	transition: transform ease 0.3s;
}
.btn-icon:hover,
.btn-icon:focus {
	background-color: darkorchid;
}
.btn-icon:hover::before,
.btn-icon:focus::before {
	transform: translate(-10px, -50%);
}
.btn-icon > span {
	display: inline-block;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}
.btn-icon:hover > span,
.btn-icon:focus > span {
	transform: translateX(-10px);
}
```

## Double volet

<button role="none" class="btn btn-rideau">
	<span>Volet</span>
</button>

```css
.btn-rideau {
	border: 2px solid #10113a;
	color: #10113a;
	background-color: transparent;
	transition: color 0.3s ease;
}
.btn-rideau:hover {
	color: white;
}
.btn-rideau::before {
	background: hotpink;
}
.btn-rideau::after {
	background: darkorchid;
}
.btn-rideau::before,
.btn-rideau::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 100%;
	left: 0;
	z-index: -1;
	transition: transform 0.3s;
	transition-timing-function: ease;
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btn-rideau:hover::before,
.btn-rideau:hover::after,
.btn-rideau:focus::before,
.btn-rideau:focus::after {
	transform: translateY(100%);
}
.btn-rideau:hover::after,
.btn-rideau:focus::after {
	transition-delay: 0.175s;
}
```

## Dégradé animé

<button role="none" class="btn btn-gradient">
	<span>Dégradé</span>
</button>

```css
.btn-gradient {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	background-position: 0% 50%;
	animation: GradientReverse 0.5s ease 1 normal forwards;
}
.btn-gradient:hover,
.btn-gradient:focus {
	animation: Gradient 0.5s ease 1 normal forwards;
}
@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 100%;
	}
}
@keyframes GradientReverse {
	0% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 50%;
	}
}
```

## Échelle non desctructrice

<button role="none" class="btn btn-scale">
	<span>Échelle</span>
</button>

```css
.btn-scale {
	overflow: visible;
	color: #10113a;
	background-color: transparent;
}
.btn-scale::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	border: 2px solid #10113a;
	border-radius: 2px;
	transition: transform 0.3s ease;
}
.btn-scale:hover::after,
.btn-scale:focus::after {
	transform: scale(1.1);
}
```