How to make movie category HTML And only

LuxTechZone 10 Feb, 2025

Hello Guys! How are you? I hope you are all good. Welcome LuxTechZone ™ website's today's article. Today I will share with you a Responsive Movie category Code Template. It’s name HTML And Redesigned bloggerand worldparss Template.

Demo

  
  <!-- Categories LuxTechZone -->
<div class="categories" style="display: flex; flex-wrap: wrap; gap: 10px;">
    <div class="category green"><a href="/">DUBBED MOVIES</a></div>
    <div class="category red"><a href="/">DESI JUNCTION</a></div>
    <div class="category blue"><a href="/">JOIN TELEGRAM</a></div>
    <div class="category purple"><a href="/">BOLLYWOOD</a></div>
    <div class="category pink"><a href="/">720P</a></div>
    <div class="category pink"><a href="/">ACTION</a></div>
    <div class="category pink"><a href="/">ADULT</a></div>
    <div class="category pink"><a href="/">ADVENTURE</a></div>
    <div class="category pink"><a href="/">ANIME</a></div>
    <div class="category pink"><a href="/">BOLLYWOOD MOVIES</a></div>
    <div class="category green"><a href="/">HORROR</a></div>
    <div class="category red"><a href="/">MYSTERY</a></div>
    <div class="category blue"><a href="/">FANTASY</a></div>
    <div class="category purple"><a href="/">COMEDY</a></div>
    <div class="category pink"><a href="/">ANIMATION</a></div>
    <div class="category green"><a href="/">NETFLIX</a></div>
    <div class="category red"><a href="/">OTT</a></div>
    <div class="category blue"><a href="/">AMAZON PRIME</a></div>
    <div class="category purple"><a href="/">JIO CINEMA</a></div>
    <div class="category pink"><a href="/">DRAMA</a></div>
</div>

       /* Category Container LuxTechZone */
.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center align */
    gap: 8px; /* Space between buttons */
}

/* Category Button Style LuxTechZone */
.category {
    padding: 8px 16px; /* Compact padding */
    border-radius: 12px; /* Soft edges */
    font-size: 14px; /* Smaller font */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    color: white;
    backdrop-filter: blur(8px); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Category Button Hover Effect */
.category:hover {
    transform: scale(1.05); /* Light pop effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

/* Category Colors LuxTechZone */
.category.green { background: linear-gradient(135deg, #00C851, #007E33); }
.category.red { background: linear-gradient(135deg, #FF4444, #CC0000); }
.category.blue { background: linear-gradient(135deg, #33B5E5, #0099CC); }
.category.purple { background: linear-gradient(135deg, #AA66CC, #9933CC); }
.category.pink { background: linear-gradient(135deg, #FF6699, #CC0066); }

/* Category Links LuxTechZone */
.category a {
    text-decoration: none;
    color: white;
    display: block;
}

/* Responsive Design LuxTechZone (for smaller screens) */
@media (max-width: 768px) {
    .category {
        font-size: 12px;
        padding: 6px 14px;
        border-radius: 10px;
    }
}

Add Buttons to Blogger

To use these buttons on Blogger, follow these steps:

Log in to your Blogger Dashboard.
Navigate to Theme > Edit HTML.
Paste the HTML & CSS code inside the <style> section or in a Custom HTML widget.
Click Save and Preview your blog!

Add Buttons to WordPress

For WordPress, you can add the buttons in a few ways:

Classic Editor: Switch to the Text Mode (instead of Visual) and paste the code.
Gutenberg Block Editor: Use a Custom HTML Block and insert the code.
CSS Customization: If needed, go to Appearance > Customize > Additional CSS and paste the CSS there.
Or you can paste css in addition css then you need to paste html only in custom html or text view mode
For more chek other codes tutorials

Scripts