fix(style): button hover animation

neerfix · Mar 10, 2022 · 7b64e45 · 7b64e45
1 parent d749c2f
commit 7b64e45
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/assets/styles/scss/main.scss b/src/assets/styles/scss/main.scss
@@ -142,12 +142,17 @@ p {
 	align-items: center;
 	padding: 15px 25px 15px 0;
 	white-space: nowrap;
+	transition: all .15s;
+
+	@apply text-brown bg-beige;
+
+	&:hover{
+		@apply bg-dark-beige;
+	}
 
 	@media (max-width: 600px) {
 		padding: 10px 20px 10px 0;
 	}
-
-	@apply text-brown bg-beige;
 
 	&:not(.btn-icon):before{
 		content: "";
@@ -205,6 +210,11 @@ p {
 		@apply text-beige bg-brown;
 		border-width: 2px;
 		@apply border-brown;
+		transition: all .15s;
+
+		&:hover{
+			@apply bg-dark-brown;
+		}
 
 		&:before{
 			@apply bg-beige;
@@ -222,6 +232,20 @@ p {
 		border: 2px solid #7B6253;
 
 		@apply border-brown;
+
+		&:hover{
+			@apply text-beige bg-brown;
+
+			&:before{
+				@apply bg-beige;
+			}
+
+			.btn-text{
+				&:before{
+					@apply text-beige;
+				}
+			}
+		}
 	}
 
 	&.btn-icon {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,7 +16,9 @@ module.exports = {
 				'brown': '#867065',
 				'light-brown': '#B78E64',
 				'dark-brown': '#7B6253',
+				'darkest-brown': '#27201c',
 				'beige': '#F4E9DD',
+				'dark-beige': '#d6c4b0',
 				'salmon': '#FF9B70'
 			},
 			fontSize: {