Adjust the color of the border surrounding the icon within a button

Is there a way to customize the color border of an SVG icon within a button to match the text of the button?

My code snippet can be found on JSFiddle, along with my usage of Bootstrap: JSFiddle

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

.icon {
  background: url(https://image.flaticon.com/icons/svg/20/20061.svg) no-repeat 5px center;
  float: left;
  padding-left: 60px;
}
<div class="submitbtn">
  <input class="btn btn-outline-info btn-lg icon" id="submit" name="submit" type="submit" value="Send">
</div>

Answer №1

If you want to enhance the appearance of your SVG, try using inline SVG code instead of setting it as a background. By doing this, you can easily manipulate the fill or stroke of the SVG using a CSS class.

<div class="submit-btn">
  <svg class="svg-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 485.411 485.411" style="enable-background:new 0 0 485.411 485.411;" xml:space="preserve">
    <g>
      <path d="M0,81.824v321.763h485.411V81.824H0z M242.708,280.526L43.612,105.691h398.187L242.708,280.526z    M163.397,242.649L23.867,365.178V120.119L163.397,242.649z M181.482,258.533l61.22,53.762l61.22-53.762L441.924,379.72H43.487   L181.482,258.533z M322.008,242.655l139.535-122.536v245.059L322.008,242.655z" />
    </g>
  </svg>
  Send
</div>

<style>
  .submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.25em;
    color: #fff;
    background: #17a2b8;
    transition: 250ms ease;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .svg-outline {
    stroke: orange;
    fill: #fff;
    height: 45px;
    width: auto;
    transition: fill 250ms ease;
    margin-right: 5px;
  }

  .submit-btn:hover {
    background: #fff;
    color: #17a2b8;
    border: 1px solid #17a2b8;
  }

  .submit-btn:hover .svg-outline {
    fill: #17a2b8;
  }
</style>

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

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

Using TypeScript with React Bootstrap's <Col> component and setting the align attribute to 'center' can trigger a TS2322 warning

The React app I'm working on includes the code below. The Col component is imported from React-bootstrap <Col md={5} align="center"> This is a column </Col> When using Typescript, I received the following warning: ...

What is the best way to pinpoint the origin of the element.style being injected by JavaScript?

I've been tasked with updating a client's WordPress website, but I'm still getting acquainted with the overall structure of the site. When looking at the blog page (), I noticed that posts are displayed within a wrapper labeled #blogleft, a ...

Creating a single div to influence the height of surrounding divs

Here is a fiddle you can check out: http://jsfiddle.net/thiswolf/RGe24/3/ to see the image div and the orange and middle divs stretch to match its height without padding the orange box towards the bottom. Here is the HTML code: <section class="les_hea ...

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels. Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half? Also, ...

The correct way to implement the bootstrap carousel with Angular

Among the multitude of inquiries on stackoveflow, I delved into a few: How to implement bootstrap carousel with Angular ng-repeat? How to utilize carousel with Angular : No answers after 9 months. Issues with Slides in Bootstrap Carousel... : No satisfac ...

What could be the reason for CSS3 PIE failing to work on sub pages when an absolute path is used in the CSS file?

I am struggling with CSS styling and have created the following class: a.greenbutton, input.greenbutton { /*background: url("../image/button.png") repeat-x scroll left top transparent;*/ behavior: url("/css3pie/PIE.php"); -webkit-border-radiu ...

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

Having an issue where, when I set the width of the combobox and the value inside it is longer than expected, the full value isn't displayed. I am considering displaying the value on multiple lines to ensure the entire content is visible. Unfortunatel ...

Stop Bootstrap from impacting a specific division on my webpage

Is there a way to stop Bootstrap from impacting a specific div and its nested divs in my HTML document? Since adding Bootstrap, the images inside this particular div have turned dull and acquired an undesirable blue tint. Thank you for considering my conce ...

Changing animation during mouse hover off

I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view. While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of ...

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

Incorporating CSS animations into Vue.js while an API call is being made

When a specific icon is clicked, an API call is triggered: <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i> I am looking to add an animation to rotate the icon until the API call is complete or ...

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

Iterate through three images using the `background-image` property in my Div

Is there a way to modify a code that loops through images based on an Img source in order to work with the "background-image" property of a div? HTML <div id="section2"></div> CSS #section2 { background-image: 'url(..images/banner1.jp ...

What is the process for creating a selector that links to an element that has been dynamically generated?

Can anyone help me figure out how to create a selector that links to a dynamically created element without using an event on the dynamic element? By dynamically created element, I mean an element that is not present in the HTML at the beginning. I know t ...

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Looking for a solution to a design issue I'm facing. You can view the situation here: jsfiddle <button type="submit"> <div class="icon"></div> </button> button { width: 250px; height: 250px; background: orange ...