Creating Stylish Download Buttons with CSS

In this blog post, we’ll be exploring a simple yet stylish HTML and CSS code snippet that creates two download buttons. This code is perfect for any website that needs to provide download links in a visually appealing manner.

HTML Structure

The HTML structure of our page is quite straightforward. We have a <!DOCTYPE html> declaration at the top, followed by the opening <html> tag with the lang attribute set to "en". Inside the <html> tag, we have the <head> and <body> sections.

In the <head> section, we define the character set and viewport meta tags, and the title of our page. The most important part here is the <style> tag, which contains all our CSS.

In the <body> section, we have an image at the top center of the page, followed by two download buttons inside a div with the class rd-center.

<b:if cond='data:blog.url != "https://www.rovana.site/p/contact.html"'>
  <body>
    <img class="top-center-image" src="https://via.placeholder.com/200" alt="Top Center Image">
    <div class="rd-center">
        <a class="rd-btn rd-icon-download" href="#">Google Drive</a>
        <a class="rd-btn bg-red rd-icon-download" href="#">Mediafire</a>
    </div>
  </body>
</b:if>

CSS Styling

The CSS styling is where the magic happens. We have several classes defined, each serving a specific purpose.

rd-center

This class is used to center the download buttons on the page. It uses the text-align: center; property to achieve this.

rd-btn

This class defines the general appearance of the download buttons. It sets properties such as display, height, background color (a gradient in this case), font color, font weight, font size, line height, border radius, padding, box shadow, text alignment, text decoration, cursor style, transition effect, border style, margin, position, and overflow.

rd-btn.bg-red

This class is used to change the background color of the second download button to a red gradient.

rd-btn:hover

This class changes the background color to white and the font color to black when the mouse hovers over the download buttons.

rd-btn:before

This class adds a subtle white overlay to the download buttons, which is initially scaled to 0.

rd-btn:hover:before

This class scales the white overlay to full size when the mouse hovers over the download buttons, creating a nice visual effect.

rd-btn.rd-icon-download:before, .rd-btn.rd-icon-download:after

These classes add a download icon to the download buttons using a SVG image encoded in base64 format.

body

This class applies a gradient animation to the body of the page, creating a dynamic background effect.

keyframes gradient

This keyframes rule defines the gradient animation used in the body class.

top-center-image

This class is used to style the image at the top center of the page.

Open Source Code

Click here to get the code

Conclusion

This HTML and CSS code snippet provides a simple and stylish way to add download buttons to your website. With a bit of creativity, you can easily modify this code to suit your own needs and preferences. Happy coding!

Rovana

Creating Stylish Download Buttons with CSS