CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="button-container">
<button class="btn btn-cancel">
Cancel
</button>
<button class="btn btn-next">
Next
<svg class="arrow-icon" fill="#ffffff" height="22px" width="22px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
</button>
</div>
</body>
</html>
CODE
.button-container {
display: flex;
gap: 16px;
}
.btn {
padding-block: 17px;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn-cancel {
background-color: #E4EDF4;
color: #464646;
border: 1px solid transparent;
width: 133px;
}
.btn-cancel:hover {
background-color: #F5F6F8;
border: 1px solid #3E77AA;
color: #3E77AA
}
.btn-next {
background-color: #1C9F56;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 133px;
transition: all 0.3s ease-in-out;
position: relative; /* Ensure the left side remains fixed */
.arrow-icon {
margin-left: 8px;
transition: transform 0.3s ease-in-out;
}
}
.btn-next::before {
content: ''; /* Add a pseudo-element to allow width expansion */
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 133px; /* Matches the initial button width */
background-color: inherit;
transition: width 0.3s ease-in-out;
border-radius: inherit;
z-index: -1; /* Keeps it behind the button content */
}
.btn-next:hover::before {
width: 140px; /* Increase the width only on hover */
}
.btn-next:hover {
background-color: #00883C;
.arrow-icon {
transform: translateX(5px);
}
}
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR