Social media floating action button with CSS

 

Demo: https://semicon.github.io/social-floating-action-button/

Code1: https://raw.githubusercontent.com/.../soc.../main/index.html

เพิ่มในไฟล์ style css

        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
        .fab-container {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            user-select: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
        }

        .fab-container:hover {
            height: 100%;
        }

        .fab-container .sub-button:nth-child(2) {
            background-color: #1d1c1c;
        }

        .fab-container .sub-button:nth-child(3) {
            background-color: #fd6804;
        }

        .fab-container .sub-button:nth-child(4) {
            background-color: #ec0404;
        }

        .fab-container .sub-button:nth-child(5) {
            background-color: #322b92;
        }

        .fab-container .sub-button:nth-child(6) {
            background-color: #04c00d;
        }

        .fab-container:hover .sub-button:nth-child(2) {
            transform: translateY(-80px);
        }

        .fab-container:hover .sub-button:nth-child(3) {
            transform: translateY(-140px);
        }

        .fab-container:hover .sub-button:nth-child(4) {
            transform: translateY(-200px);
        }

        .fab-container:hover .sub-button:nth-child(5) {
            transform: translateY(-260px);
        }

        .fab-container:hover .sub-button:nth-child(6) {
            transform: translateY(-320px);
        }

        .fab-container .fab {
            position: relative;
            height: 70px;
            width: 70px;
            background-color: #ec038b;
            border-radius: 50%;
            z-index: 2;
        }

        .fab-container .fab::before {
            content: " ";
            position: absolute;
            bottom: 0;
            right: 0;
            height: 35px;
            width: 35px;
            background-color: inherit;
            border-radius: 0 0 10px 0;
            z-index: -1;
        }

        .fab-container .fab .fab-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

        .fab-container .fab .fab-content .fa-solid {
            color: white;
            font-size: 48px;
        }

        .fab-container .sub-button {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 10px;
            right: 10px;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .fab-container .sub-button:hover {
            cursor: pointer;
        }

        .fab-container .sub-button .fa {
            color: white;
            font-size: 32px;
        }

เพิ่มในไฟล์ html

    <div class="fab-container">
        <div class="fab shadow">
            <div class="fab-content">
                <i class="fa-solid fa-headset"></i>
            </div>
        </div>
        <div class="sub-button shadow">
            <a href="Your github URL" target="_blank">
                <i class="fa-brands fa-github fa"></i>
            </a>
        </div>
        <div class="sub-button shadow">
            <a href="Your blogspot URL" target="_blank">
                <i class="fa-brands fa-blogger-b fa"></i>
            </a>
        </div>
        <div class="sub-button shadow">
            <a href="mailto:Your email" target="_blank">
                <i class="fa-regular fa-envelope fa"></i>
            </a>
        </div>
        <div class="sub-button shadow">
            <a href="Your facebook URL" target="_blank">
                <i class="fa-brands fa-facebook-f fa"></i>
            </a>
        </div>
        <div class="sub-button shadow">
            <a href="https://line.me/ti/p/~Your Line ID" target="_blank">
                <i class="fa-brands fa-line fa"></i>
            </a>
        </div>
    </div>

ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}

>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.

I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.

                                                                THANKS FOR VISITING thumariya.blogspot

Have a nice day!

-------------------------- -------------------------

>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น

ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา

ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot

ขอให้เป็นวันที่ดี!

-------------------------- -------------------------

{fullWidth}