Create a custom div class specifically designed for an image button

Apologies if my title is a bit misleading, I struggled to find the right phrasing.

Currently, I have images linked to various social networks using href. For instance, clicking on the facebook icon directs to my Facebook page. The layout looks like this:

<div class="row">
            <center>
                <div class="span2">
                    <a href="http://www.facebook.com/XXXXXXX" target="_blank"><img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img></a> 
                </div>

Is there a way to turn this into a "class," if that makes sense? So I could achieve the same effect by doing something like this:

<div class="span2">
<a href="http://www.facebook.com/XXXXXX" target="_blank" class="facebookbutton"></a>
</div>

And then in the CSS implement this:

.facebookbutton {
    width: 64px;
    height: 64px;
    background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}

I hope this isn't a silly question, I'm still learning haha!

Thank you :)

Answer №1

After fixing the typos and adding display: block, the code you've written will function properly.

Link to working code

.facebookbutton {
    width:64px;
    height:64px;
    background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
    display:block;
}

HTML

<div class="span2">
<a href="http://www.facebook.com/XXXXXX" target="_blank" class="facebookbutton"></a>
</div>

To improve layout, consider using display: inline-block;.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Use AJAX to Read a Text File in JavaScript

Having trouble with AJAX! I have successfully set up a marquee on my website, but now I want it to dynamically fetch the text from a text file. The goal is to read the text from the file (which contains only one line) and assign it to a global variable nam ...

Occasions focused on the <input type="file"> feature

Looking for a way to write a file input in React that accepts CSV files, validates them, and prevents upload if there are errors? Check out the code snippet below: <CustomInput type="file" id="fileBrowser" name="file" label={filename || 'Choos ...

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...

Having trouble choosing elements with angular.element within ng-repeat loop

In my HTML code, I am using an ngRepeat element: <ol id="animationFrame"> <li ng-repeat="animationImage in animationImages" ng-repeat-listener> <img ng-src="{{animationImage.src}}" id="{{animationImage.id}}"> </li> </ol& ...

Foundation mobile navigation menu malfunctioning on website

I'm currently in the process of creating a website and I've decided to prioritize making it "mobile first". To achieve this, I've opted to utilize Foundation by Zurb as I find it more user-friendly. Here is the code snippet that I am using: ...

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

I am experiencing an issue with displaying the most recent events from my database using PHP. The Bootstrap framework and CSS are causing them to appear as a single column on the page, but I would like them to be displayed in rows of three. I have attempt ...

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from to this: I am unable to modify the style and also need to add an intermediate step I have included , '.Mui-active': { color: '#1C6FC9', }, ...

Tips for keeping a link in place on an image

Trying to place a link on a 1920x1080 picture and keep it fixed in one spot, regardless of browser size. Any suggestions? <!DOCTYPE html> <link rel="stylesheet" href="../style.css" /> <html> <head> ...

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

Incorporating external CSS and JS files into your WordPress website

Hello, I am unfamiliar with the Wordpress framework and I am seeking guidance on how to add an external CSS and JS file to my Wordpress page. I have successfully created a new page, but would like to incorporate a CSS and JS file into it. Would creating a ...

The beginning of an HTML document and the viewport (screen view) location

Absolute positioning is relative to a containing block that provides a positioning context, which defaults to the document. a) If absolute positioning is relative to the document, can we visualize the starting point of a document as a two-dimensional coor ...

two adjacent elements filling the entire height of the window at 100% dimensions

Is there a way to place two elements side by side, with one of them (the textarea) always being 100% height of the window? I've looked at similar questions here but can't figure out how to make it work. Can you help me with this? html: <div ...

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

I am facing an issue with the "Contact Me" tab as it does not display its content when clicked. Here is the code snippet: <body> <ul class="tabs"> <li data-tab-target="#home" class="active tab">Home< ...

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

How can I align text to the right in a navbar using Bootstrap 5?

My current navbar setup is as follows: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarText"> ...

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Curious about the possibility of a video page layout featuring a main screen and smaller clickable screens below it. When clicking on one of the smaller screens, the main screen would display the selected video, similar to YouTube. We have obtained data f ...

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Here's an anchor tag with a tooltip: <a data-toggle="tooltip" data-original-title="Apologies, pronunciation audio is currently unavailable."> <span class="glyphicon glyphicon-volume-off pronounce"> </span> </a> When v ...