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 :)

htmlcssimageclass

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

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart

Using Selenium to locate and click on a hyperlink within a table by identifying it with its displayed name

In my case, I have a table that displays records of school districts. My goal is to use Selenium in order to select the delete icon positioned in the eighth td for the district located on a row with a specific name. In this scenario, the name being QA__run ...

cssxpathselenium

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

Issue: Animation not triggered on exit by React-transition-group Transition

I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect. The desired effect is for the icons to spin both on enter and exit, although there may ...

cssreactjsanimationreact-transition-group

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

Having issues with Tailwind classes not being applied properly on dynamically generated pages in Gatsby-node

Currently, I am working on building dynamic pages using gatsby-node. The templates for these pages are stored in the templates/ directory. However, I have run into an issue where I cannot utilize tailwind classes within these templates unless they are al ...

cssreactjstailwind-cssgatsbypostcss

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Moving specified data from one interactive table to another interactive table

In my setup, there are two tables - one for products and another for customers: <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Product Code</th> </tr> </thead> ...

angularjshtml

Attempting to adjust the width of a text animation loaded with jQuery using Textillate, but encountering difficulties

I found a captivating animation on this website: http://codepen.io/jschr/pen/GaJCi Currently, I am integrating it into my project. #content { position: relative; margin-left: auto; margin-right: auto; width: 1000px; height: 700px; } ...

javascriptjqueryhtmlcsswidth

Global setting of font size ratio in Material UI library

After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...

cssmaterial-uifont-size

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Which child node of the html tag represents the "text"?

In my quest for answers, I have searched extensively but to no avail: As we all know, when a web page is loaded in a browser, it generates a tree-like structure called the Document Object Model (DOM). This allows Javascript to manipulate the elements of t ...

javascripthtmldomdom-node

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout. <div class="comment"> <div class="leftpart"> </div> <div class="rightpart"> </div> </div> When viewing on a desktop, I maintain the original styling where each div is in its own s ...

htmlcss

Tips on handling a nested HTML hyperlink in Selenium using Python with IE11

Can anyone assist me in resolving the issue of clicking on a hyperlink within an HTML page that contains nested HTML elements up to 4 levels deep? I have attempted various methods using XPATH, but they do not seem to work during runtime. I am utilizing Sel ...

htmlpython-3.xselenium-webdriverinternet-explorer

CSS trick for stylish arrow placement on top of a slide

Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the ...

htmlcsssliderpositionslick.js

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

Is there a way to make all Bootstrap column heights equal using only jQuery?

I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...

javascriptjqueryhtmlcsstwitter-bootstrap