<NikNac>'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

Code for Flashbang Button :P

Hii, here's my Code for the Flashbang Button from my Profile, in case anyone wanna use it :3

There are maybe some unnecessary stuff in the code, cause I'm not too familiar with CSS lol >_< 
Anyways copy n pasta this:


<!-- Flashbang Button by https://spacehey.com/profile?id=2986414 -->

<div class="flashbang-button">

    <img src="https://static.wikia.nocookie.net/cswikia/images/f/f3/Flashbanghud_csgo.png/revision/latest?cb=20211113165814" alt="Flashbang Icon" class="flashbang-icon"/> /* Flashbang Icon IMG between the "" */

</div>


<!-- Flashbang Screen -->

<div class="flashbang-screen"></div>


<style>

/* Flashbang Button Styling */

.flashbang-button {

    position: fixed;

    bottom: 20px; /* Position at the bottom left */

    left: 20px;

    background-color: #000;

    padding: 10px 15px;

    color: white;

    font-size: 16px;

    border-radius: 5px;

    display: flex;

    align-items: center;

    cursor: pointer;

    z-index: 9999;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}


/* Flashbang Icon Styling */

.flashbang-icon {

    width: 35px; /* Adjust size for the  flashbang button */

    height: auto;

    margin-right: 10px;

}


/* Screen Effect (Flashbang effect) */

.flashbang-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: white; /* White screen */

    opacity: 0;

    pointer-events: none; 

    z-index: 9998;

    transition: opacity 4s ease-out; /* Fade out effect duration of white screen */

}


/* Activate Flashbang Effect */

.flashbang-button:active ~ .flashbang-screen {

    opacity: 1; /* Show the white screen */

    transition: opacity 0s; /* Immediate white screen on click */

}

</style>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )