Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. Currently, I am facing the issue of the 30px padding-right still being applied even when there is no external icon present (Example).

Is there a way to toggle the CSS based on the presence of an external icon?

Below is the HTML and CSS:

.btn {
  border-radius: 3px;
  border: none;
  height: 45px;
  font-weight: bold;
  font-size: 18px;
  background: #FFFFF;
  color: #515151;
  margin-top: 19px;
  padding-top: 12px;
  border: solid #FFFFFF 1px;
}
<a href="......." title="Hello World" class="btn btn-default" role="button" target="_blank">
    Button Title
    <svg class="svg-inline--fa fa-external-link fa-w-16 pull-right" title="external link icon" aria-labelledby="svg-inline--fa-title-u1BaVqD2mZ2F" data-prefix="far" data-icon="external-link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <title id="svg-inline--fa-title-u1BaVqD2mZ2F">external link icon</title>
    </svg>
    <!-- <i class="far fa-external-link pull-right" title="external link icon"></i> -->
</a>

javascripthtmljquerycsscss-selectors

Answer №1

To achieve this, you can utilize the :has() pseudo selector.

.btn:has(svg) {
    padding-right: 30px;
}

Unfortunately, :has() is not currently supported by browsers, so it may be best to avoid using it for now.

However, there is a workaround available...

You could try adding padding or margin directly to the icon itself.

.btn > svg { margin-right: 30px }

Answer №2

To achieve this effect, JavaScript is required as it cannot be done using only CSS. By utilizing the .style property, you can dynamically adjust the styling of an element. For instance, if you want a button to have a padding-right of 30 pixels upon clicking, you would need to incorporate some JavaScript. Here's an example implementation where the padding is added during a click event:

const button = document.querySelector(".button");
button.addEventListener("click", () => {
  button.style.paddingRight = "30px";
});

It's worth noting that this adjustment can be made in response to various events, not just clicks.

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

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

htmlcss

Is there a way to include individual Facebook comments for each image within a jQuery lightbox?

After completing my own version of a lightbox using HTML5, CSS, and jQuery, I encountered an issue with the comments feature. While each image in the gallery should have separate comments, Facebook's comment system only records comments for the entire ...

jqueryhtmlfacebooklightboxfacebook-comments

Error: Supabase and Next.js encountered a self-signed certificate within the certificate chain causing an AuthRetryableFetchError

Encountering an error related to certificates while attempting to retrieve the user from Supabase within getServerSideProps using Next.js: AuthRetryableFetchError: request to https://[redacted].supabase.co/auth/v1/user failed, reason: self signed certifica ...

javascriptnode.jsnext.jsssl-certificate

Problematic PHP/AJAX: How come my getAttribute function is only selecting the initial line within the foreach loop?

My goal here is to display a list of users, each with a button that sends unique IDs to the database. The issue I'm facing is that the code only works for the first user in the list and not the rest. I suspect this is because every list item has the s ...

phpjqueryarraysajax

Unable to integrate a new third-party script into a Next.js application

In my attempt to integrate the following script, I have tried adding it first to _document.js, then to app.js, and finally to a specific page. <Script src="https://anywebsite.ai/chatbot/chatbot.js"></Script> <Script id=" ...

javascriptreactjsnext.js

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

javascriptjqueryhtml

What is the recommended method for choosing text colors when creating GUI for app development?

Currently preparing PSDs for the development of both an iOS and Android app. When it comes to coloring text, should I: 1) Utilize #000000 for black text, adjusting opacity to achieve various shades of gray for primary and secondary text? 2) Or opt for a ...

androidioscssuser-interfacegraphics

Implementing JSON web tokens on the client side using Node.jsHere are the steps to implement

I have been developing a Node.js express application with JWT for authentication to secure access to my admin page. While testing my routes using Postman, everything works smoothly on the server side. However, I am facing a challenge on the client side in ...

javascriptnode.jsexpressjwt

Addressing Memory Leakage Issues in a Basic Node.js Application

Out of sheer curiosity and as an experiment with NodeJS, I decided to write a basic program to test the Collatz Conjecture for an incredibly high number of integers. While this concept should work fine in theory, my simple code is unexpectedly facing a mem ...

javascriptnode.jsmemory-leaks

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

csshtmlborder

Guide to customizing the default scrollbar colors in Nextjs

When browsing websites like tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox, you may have noticed that they utilize the default scrollbar style but allow users to change its colors through a dark/light mode button. The appearance of ...

javascriptreactjsnext.jsscrollbar

Exploring the Functionality of Using Multiple Middlewares in Vue.js 3

For my web app project using vue.js 3 and vue-router, I followed a helpful tutorial on implementing middleware pipelines. The tutorial can be found at: https://blog.logrocket.com/vue-middleware-pipelines/. This tutorial demonstrated creating middleware to ...

javascriptvue.js

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

How can I ensure that the focusout event is triggered only when the user is not focusing on the entire form element? Currently, if the user clicks on any of the form's inner elements such as the text field or the button, the event is still being trigg ...

javascriptjquery

Problems with spacing in Slick slider and lazyYT integration

Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem ...

javascriptjqueryhtmlcssslider

React.js experiencing issues with loading the splash screen

I am developing a Progressive Web App (PWA) and I am currently facing an issue with displaying the splash screen. In my index.html file, I have added the following code to the head section: <link rel="apple-touch-startup-image" media="scr ...

javascripthtmlreactjsnext.jsprogressive-web-apps

What are the steps to resolve a peer dependency problem with npm?

I am facing a conflict in my package.json file with the following modules: react-router requires react 0.13.x redbox-react requires react@>=0.13.2 || ^0.14.0-rc1 After running npm install react, I ended up with version <a href="/cdn-cgi/l/emai ...

javascriptnode.jsnpm

Utilizing the Power of AJAX in Combination with an Event Loop

I have a function that is supposed to make AJAX requests with an event loop while taking 9 inputs at the top and querying them from a database. Currently, it only logs to the console but will eventually perform more actions. However, I am encountering an ...

javascriptajaxloopsfor-loopevents

How can one properly iterate through an HTML Collection in JavaScript?

I need help with creating a slider using JavaScript. The code I have written below calculates the widths of the slides, but it's throwing an error in the console. Can someone advise on how to properly loop through and assign width to these elements? ...

javascriptloops

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right sid ...

htmlcss

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...

jqueryhtmljquery-uicss