Jon Snow
2023-10-08T10:30:00Z
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Change When Hover</title>
</head>
<body>
<button>
<div class="default-btn">
<svg
class="css-i6dzq1"
stroke-linejoin="round"
stroke-linecap="round"
fill="none"
stroke-width="2"
stroke="#FFF"
height="20"
width="20"
viewBox="0 0 24 24"
>
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle r="3" cy="12" cx="12"></circle>
</svg>
<span>Quick View</span>
</div>
<div class="hover-btn">
<svg
class="css-i6dzq1"
stroke-linejoin="round"
stroke-linecap="round"
fill="none"
stroke-width="2"
stroke="#ffd300"
height="20"
width="20"
viewBox="0 0 24 24"
>
<circle r="1" cy="21" cx="9"></circle>
<circle r="1" cy="21" cx="20"></circle>
<path
d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
></path>
</svg>
<span>Shop Now</span>
</div>
</button>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* background: #e8e8e8; */
margin: 0;
}
button {
position: relative;
overflow: hidden;
outline: none;
cursor: pointer;
border-radius: 50px;
background-color: hsl(255deg 50% 40%);
border: solid 4px hsl(50deg 100% 50%);
font-family: inherit;
}
.default-btn,
.hover-btn {
background-color: hsl(255deg 50% 40%);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
border-radius: 50px;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
transition: all 0.3s ease;
}
.hover-btn {
position: absolute;
inset: 0;
background-color: hsl(255deg 50% 49%);
transform: translate(0%, 100%);
}
.default-btn span {
color: hsl(0, 0%, 100%);
}
.hover-btn span {
color: hsl(50deg 100% 50%);
}
button:hover .default-btn {
transform: translate(0%, -100%);
}
button:hover .hover-btn {
transform: translate(0%, 0%);
}
