Responsive Buttons with Hover by admin

0 Add to Favorites

HTML Code
CSS Code

:root {
  --primary-color: #28527c;
  --secondary-color: #d89b43;
  --tertiary-color: #c24229;
  --text-color: #fff;
  --background-color: #fcfbf7;
  --focus-shadow-primary: 0 0 0 3px rgba(40, 82, 124, 0.5);
  --focus-shadow-secondary: 0 0 0 3px rgba(224, 169, 78, 0.5);
  --focus-shadow-tertiary: 0 0 0 3px rgba(194, 66, 41, 0.5);
  --text-font: "Open Sans", sans-serif;
  --font-size-base: 16px;
  --hover-scale: 1.1;
}

/* Reset */
*,
html {
  font-family: var(--text-font);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fond de page */
body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: var(--background-color);
  font-size: var(--font-size-base);
  overflow-x: hidden;
}

/* Conteneur des boutons */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem;
}

/* Styles généraux d'un bouton */
.button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.625rem;
  padding: 0.9375rem 1.875rem;
  font-size: 1rem;
  color: var(--text-color);
  border: none;
  border-radius: 0.3125rem;
  text-wrap: nowrap;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
}

/* Icône d'un bouton */
.button i {
  font-size: 1.125rem; /* 18px */
}

/* Styles spécifiques des boutons */
.button.primary {
  background-color: var(--primary-color);
}

.button.secondary {
  background-color: var(--secondary-color);
}

.button.tertiary {
  background-color: var(--tertiary-color);
}

/* Styles commun au survol des boutons */
.button:hover {
  transform: scale(var(--hover-scale));
  -webkit-transform: scale(var(--hover-scale));
  animation: pulse 0.6s infinite;
}

/* Styles spécifiques au survol des boutons */
.button.primary:hover {
  background-color: #234a73;
}

.button.secondary:hover {
  background-color: #d2902b;
}

.button.tertiary:hover {
  background-color: #b6422d;
}

/* Styles du focus sur les boutons (acessibilité) */
.button:focus-visible {
  outline: none; /* Supprime l'effet de focus par défaut */
}

.button.primary:focus-visible {
  box-shadow: var(--focus-shadow-primary);
  -webkit-box-shadow: var(--focus-shadow-primary);
}

.button.secondary:focus-visible {
  box-shadow: var(--focus-shadow-secondary);
  -webkit-box-shadow: var(--focus-shadow-secondary);
}

.button.tertiary:focus-visible {
  box-shadow: var(--focus-shadow-tertiary);
  -webkit-box-shadow: var(--focus-shadow-tertiary);
}

/* Animation */
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

Uploaded: 13th July 2024

Tags: #responsive, #primary, #danger, #icons, #hover

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 25 CSS properties used in the above example. Click to view and learn about each property.

font-family margin padding box-sizing position display align-items justify-content height background-color font-size overflow-x flex-wrap gap flex color border border-radius text-wrap cursor transition transform animation outline box-shadow