What is the process for adjusting the border color of my button?

Is there a way to change the blue outline color to #D5A021 instead of blue when the button is clicked by the user?

I believe it might be related to the btn-primary class

HTML

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

CSS

.btn-xl {
  padding: 1rem 2rem
}

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #D5A021!important;
}
htmlcssbootstrap-4

Answer №1

If you're aiming to customize the default Bootstrap classes, the code below will help you achieve that:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.btn-xl {
            padding: 1rem 2rem
        }
        .btn-primary, 
        .btn-primary:hover {
            background-color: #D5A021;
            border-color: #D5A021;
        }
        .btn-primary:active,
        .btn-primary:focus {
            color: #fff;
            background-color: #D5A021 !important;
            border-color: #D5A021 !important;
            box-shadow: 0 0 0 0.2rem rgba(213,160,33, 0.5) !important;
        }
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>

Make sure to adjust the box-shadow property in Bootstrap 4 to your desired specifications.

Answer №2

To incorporate the CSS outline-color Property into your styles, simply include it where necessary.

Here's a sample usage:

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
  outline-color: #D5A021;
}

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

Creating a Consistent Look for Italic Font Formatting in Tailwind

In an effort to establish consistent typography on a website being developed by my team, we have devised custom utility classes in Tailwind. One of these classes, small-italicized, also requires the text to be italicized. However, it seems that the fontSiz ...

javascriptcssreactjsnext.jstailwind-css

How can the color of unselected mat-steps be customized in Angular?

In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...

cssangular-materialmat-stepper

Tips for showing multiple autocomplete entries in a text box following a successful AJAX request

I'm having an issue with my code where the autocomplete multiple values, successfully retrieved by Ajax, are not being displayed. Here is the HTML I am using for display: <input type="text" name="s_to" id="s_to" class="controls"> Here is my jQ ...

javascriptphpjquerycssajax

Decoding HTML with C#

When I use my program to visit a URL and read the resulting HTML, the process goes smoothly. string URI = "http://www.testwebsite.com/submit?q=+mydata"; string myParameters = ""; using (WebClient wc = new WebClient()) ...

c#html

What is the best way to continuously add items to a div until their heights are equal?

In my layout, I have two divs positioned next to each other. Typically, the left div displays n+2 items while the right div displays n items. The value of n changes depending on the category and is already set. However, there are instances where certain ...

javascriptjquerycssajax

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

javahtmlplayframework

Gulp fails to generate a CSS file after compiling Sass to CSS

Recently, I've been having trouble compiling my sass file to css. Even though it was working fine before and I haven't made any changes, now my CSS file is empty. Below is the task I am trying to accomplish: gulp.task('sass', function ...

csssasscompilationgulp

What is the best way to send put and delete requests through a form using node.js and express.js?

Attempting to send a put request: Put form code snippet: <form id="for" action="/people" method="post"> <div class=""> <input type="text" name="Name" value=<%= data[0].name %> > </div> ...

javascripthtmlnode.jsexpress

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table

What could be causing the overflow of content from my div element?

Let's discuss the problem at hand: I have an HTML code snippet: <div id="container"> <div id="fixedImg"></div> <div id="content" class="clearfix"> asdf <br /> asdf <br /> df<br />asdf & ...

htmlcss

Is it possible to replace multiple li elements with multiple ul elements within a single ul for better organization?

In the world of HTML and CSS, there are endless possibilities for creating unique designs. Recently, I stumbled upon an interesting question that has been lingering in my mind without a clear answer. Typically, people use a single "ul" element to create a ...

htmlcss

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Is there a way to make a div element clickable?

I have attempted to include a link (href) in the cart-button class using the following HTML code: <div class="cart-button" href="#shopping-cart" alt="view-shopping-cart"><span>Shopping Cart (0)</span> <div class="cart-dropdo ...

csshtmlbuttonhref

Tips for enabling only a single div to expand when the "read more" button is clicked

I'm having trouble with my blog-style page where I want only one "read more" link to expand while collapsing the others. I've tried various jQuery methods and HTML structures, but haven't been able to achieve the desired result. Can someone ...

jqueryhtml

Troubleshooting a Scrolling Problem in AngularJS页面

My web page design incorporates a header, content body, and footer using Responsive and Angular Material. Within the Content Body, there is an md-content element containing multiple text paragraphs enclosed in <p>. I have set the overflow to auto (ov ...

htmlcssangularjsscrollbar

Troubleshoot: Border problem within nested columns in Bootstrap

https://i.sstatic.net/RDWfp.png My layout is based on the bootstrap 4 grid system, as shown in the image above. The problem I'm facing is that the border at the bottom row is misaligned. I have four nested columns in the first and second rows, but on ...

htmlcsstwitter-bootstrapbootstrap-4

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

htmlnode.jstypescriptdomdomparser

Looking to adjust the positioning of text being inserted into a column - unable to utilize text-align or float properties

I'm struggling to position my text in a specific area within a column using CSS. Our app displays a price when a quantity is selected, but I can't seem to center the $14 under 'Item Total'. Even using float: center; hasn't worked f ...

htmlcsstwitter-bootstrap