Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button.
Button:
<button type='button' id='{0}' onClick='delete_row(this.id)' style ='font-size:17px' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>"
One suggestion is to utilize the SVG version of the icon and implement pointer-events to allow interaction on the path only. However, keep in mind that hover effects will not work inside the icon since visually it is not part of the path.
Here's an example to demonstrate.
button {
font-size:80px;
margin:10px;
pointer-events:none;
border:none;
background:none;
}
svg {
border:1px solid red;
}
svg path{
pointer-events:auto;
}
button:hover path{
fill:red;
}<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='fas fa-trash-alt '></i></button>
<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>You might want to consider using a different icon or adjusting the SVG so that the entire area belongs to the path.
In your specific scenario, you can add a pseudo-element to cover the inside part and restore mouse interaction:
button {
margin:10px;
pointer-events:none;
border:none;
background:none;
padding:0;
position:relative;
}
button:before,
button:after{
content:"";
position:absolute;
bottom:0.12em;
left:0.12em;
right:0.12em;
top:0.2em;
pointer-events:auto;
}
button:after{
top:0.1em;
height:0.2em;
left:0.24em;
right:0.24em;
}
svg path{
pointer-events:auto;
}
button:hover path{
fill:red;
}<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-10x btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>
<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-5x btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>
<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-3x btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>To incorporate a button border, you can include the button_border class - border-0, especially if utilizing bootstrap.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>
<button type='button' id='{0}' onClick='delete_row(this.id)' style ='font-size:17px' class='btn btn-outline-danger border-0' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>Alternatively, you have the option to keep only the btn class and define your desired color.
.red-button [class*=fa] {
color: #dc3545;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>
<button type='button' id='{0}' onClick='delete_row(this.id)' style='font-size:17px' class='btn red-button' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>If preferred, another approach could involve using a different element such as span.
.red-button [class*=fa] {
color: #dc3545;
}
.red-button {
cursor: pointer;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>
<span id='{0}' onClick='delete_row(this.id)' style='font-size:17px' class='red-button' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></span>The options are plenty for customization.
Seeking assistance with completing a straightforward task: Creating an HTML AJAX link that triggers a Node.js API call to retrieve a value, wait for the response, and then display the value in HTML, JS, or PHP. After clicking on the "Get My Value" link be ...
I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...
I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...
When I set border: 1px outset blue; as the style for an element, the browser displays two distinct border colors: one for the top and left borders, and another for the bottom and right borders. li { border: 10px outset #0000FF; color: #FFF; ...
Incorporating Material UI into my project, I decided to use a drawer for navigation. However, within the drawer, there are Collapsible lists that expand when clicked. The issue arises when the list text items are lengthy, causing the drawer to unexpectedly ...
I am facing an issue with a webpage that displays 10 different items, each of which has a slow loading time. Currently, the entire page waits for all 10 items to fully load before displaying anything. I am interested in finding out if it is feasible to sh ...
Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...
I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...
I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...
Web Development : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> The Coding Academy Survey</title> <link rel="stylesheet" href="styles.css" ...
There seems to be an issue with the selectbox being unselectable at the lower part in Safari. It's difficult to pinpoint the exact problem in the code. You can see the issue on the country selectbox by visiting this website: <span> <sp ...
Here is a jQuery function along with a PHP file: <script> $(document).ready(function(){ $(".book_id_class").click(function(){ $("td:hidden").show(); }); }); </script> <table> <tr> <td class="text-center">Book ID</td> & ...
I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...
Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...
Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...
I am running a web server for my basic HTML page that does not have a web icon included in the template. "HTTP/1.1 200 OK" Content-Type: text/html Connection: close <!DOCTYPE html> <html> <head> <met ...
I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...
Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...
As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...
I am currently dealing with HTML markup that is being generated by a third-party application. I am in the process of styling it to fit my branding, but I have encountered a challenge that I cannot figure out. Most of the time, the HTML structure consists o ...