Add a Stylish Floating Donate Button to Your Website with HTML & CSS

by

This code creates a floating “Donate” button on a webpage using HTML and CSS. The button is positioned fixed on the left side of the screen and rotates -90 degrees, making it appear vertically aligned.

Preview Output:
Floating Donate Button HTML CSS Code
HTML Code:
<a href=”https://econvert.org/donate/” class=”donate-button”>Donate</a>
CSS Code:
.donate-button {
position: fixed;
background: #012675;
color:white;
font-weight:500;
border-radius: 0px 0px 10px 10px;
padding:0px 15px 0px 15px;
left: -31px;
top: 80%;
transform: translateY(-50%) rotate(-90deg);
z-index: 9999; }
.donate-button:hover {
color: Yellow;
background:black; }
@media only screen and (max-width: 768px) {
.donate-button {
display: none; } }

Leave a Comment