How To Make Button like vegamovie
To make the button text color black, you can modify the
color
property in the inline style
attribute of each button. Here's the updated code:
<style>
.btn.btn-sm.btn-outline {
font-size: 16px;
padding: 12px 24px;
margin: 10px;
border: none;
cursor: pointer;
color: black; /* Changed text color to black */
text-transform: uppercase;
font-weight: bold;
border-radius: 8px;
text-shadow: 0 0 5px #fff;
position: relative;
transition: 0.3s;
overflow: hidden;
}
.btn.btn-sm.btn-outline::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 8px;
z-index: -1;
opacity: 0.8;
filter: blur(10px);
transition: 0.3s;
}
.btn.btn-sm.btn-outline:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}
/* V-Cloud Button Styling LuxTechZone */
.btn.btn-sm.btn-outline[style*="ed0b0b"] {
box-shadow: 0 0 15px rgba(237, 11, 11, 0.8);
}
.btn.btn-sm.btn-outline[style*="ed0b0b"]::before {
background: linear-gradient(135deg, #ff0000, #ffcc00);
}
/* GDToT Button Styling LuxTechZone */
.btn.btn-sm.btn-outline[style*="2ea1cf"] {
box-shadow: 0 0 15px rgba(46, 161, 207, 0.8);
}
.btn.btn-sm.btn-outline[style*="2ea1cf"]::before {
background: linear-gradient(135deg, #00ffff, #ff00ff);
}
</style>
<p style="text-align: center;">
<a href="#" rel="nofollow noopener noreferrer" target="_blank">
<button class="btn btn-sm btn-outline" style="background: linear-gradient(135deg, rgb(14, 186, 195), rgb(9, 210, 97)); color: black;"><i class="fa fa-download"></i> ⚡ G-Direct [Instant] <i class="fa fa-download"></i></button></a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank"><button class="btn btn-sm btn-outline" style="background: linear-gradient(135deg, rgb(237, 11, 11), rgb(242, 209, 82)); color: black;"><i class="fa fa-download"></i> ⚡ V-Cloud [Resumable] <i class="fa fa-download"></i></button></a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank"><button class="btn btn-sm btn-outline" style="background: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(0, 0, 0)); color: black;"> ⚡ Filepress [G-Drive] </button></a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank"><button class="btn btn-sm btn-outline" style="background: linear-gradient(135deg, rgb(46, 161, 207), rgb(255, 25, 208)); color: black;"><i class="fa fa-download"></i> ⚡ GDToT [G-Drive] <i class="fa fa-download"></i></button></a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank"><button class="btn btn-sm btn-outline" style="background: linear-gradient(135deg, rgba(4, 88, 114, 0.82), rgba(255, 99, 128, 0.73)); color: black;"><i class="fa fa-download"></i> DropGalaxy</button></a>
Demo
Now, all button text will appear in black while keeping the gradient backgrounds intact. Let me know if you need further tweaks!
To add these custom-styled buttons to your Blogger post or page, follow these steps:
1. Open Blogger and Edit a Post/Page
- Go to Blogger and Sign in to your blog.
- Open the post or page where you want to add the buttons, or create a new one.
2. Switch to HTML View
- In the post editor, click on "HTML" mode (next to "Compose").
3. Paste the HTML Code
- Copy and paste the following code into the HTML editor:
4. Save and Publish
- Click "Save" or "Publish" to make the buttons visible on your Blogger page.
Now, your buttons will appear with a black text color and stylish gradient backgrounds. Let me know if you need any modifications!