---
title: Buttons hover
subtitle: Simple, but nice.
lang: en
slug: "buttons"
draft: true
excerpt: Easy to grab and use hover effects.
tags: ["CSS"]
code: true
createdAt: "2020-10-08T09:00:00.000Z"
---

## General rules

All the buttons use these styles as a “reset”:

> Don't forget to prefix if necessary!

```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;
}
```

## Add an icon

<button role="none" class="btn btn-icon">
  <span>Icon</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 shutter down

<button role="none" class="btn btn-rideau">
  <span>Shutter</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;
}
```

## Animated gradient

<button role="none" class="btn btn-gradient">
  <span>Gradient</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%;
	}
}
```

## Non destructive scale

<button role="none" class="btn btn-scale">
  <span>Scale</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);
}
```