이메일 버튼으로 아름다운 연락 - 단계별 가이드

HTML

HTML의 경우 클래스 "버튼"이 있는 div 요소와 내부에 "@"svg가 있는 두 개의 텍스트 요소가 필요합니다.

<div class="button">
    <span>info</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
    </svg>
    <span>designyff.com</span>
</div>

CSS

CSS의 경우 먼저 "버튼"클래스의 스타일을 지정합니다.

먼저 flexbox를 사용하여 항목을 정렬하고 커서를 포인터로, 너비를 50px로 설정합니다.

이제 위치를 상대적으로, 배경색을 연한 파란색으로, 텍스트 색상을 흰색으로 설정합니다.

작은 상자 그림자와 100px 반경의 1픽셀 너비의 흰색 테두리를 추가합니다.

마지막으로 일부 패딩과 전환을 추가합니다.

.button {
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    width: 50px;
    position: relative;
    background-color: rgb(69, 165, 249);
    color: #fff;
    box-shadow: 0 0 40px #777;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 100px;
    transition: .5s;
}

호버에서 너비를 50에서 100px로 늘리고 전환을 추가합니다.

.button:hover {
    width: 180px;
    transition: .5s;
}

버튼 내부의 텍스트 요소는 너비가 0이고 약간의 전환으로 숨겨진 오버플로가 있습니다.

span {
    width: 0px;
    overflow: hidden;
    transition: .5s;
}

가리키면 첫 번째 텍스트 요소("정보"텍스트 포함)의 너비가 28픽셀이 되고 이 너비 변경이 원활하도록 약간의 전환을 추가합니다.

.button:hover span:first-child {
    width: 28px;
    transition: .5s;
}

두 번째 텍스트 요소("designyff.com"텍스트 포함)는 너비가 100픽셀이 되고 전환을 통해 이 변경이 멋지고 매끄럽게 보입니다.

.button:hover span:last-child {
    width: 100px;
    transition: .5s;
}

그리고 그게 다야.

전체 코드 및 비디오 자습서here를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️