Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same?

//NAVIGATION
//========================

.nav ul
  display: flex
  padding-left: 0
  padding-top: 15px

.nav li
  list-style: none
  padding: 10px

.nav ul li a
  text-decoration: none
  color: #000000

.nav ul li:last-child
  color: #FFFFFF

.nav ul li a:hover
  color: #5c6ac4

.nav li:not(:last-child)
  margin-right: 20px

.nav li:nth-child(3)
  margin-right: auto

//BUTTON
//==============

.btn
  width: 160px
  height: 20px
  //border: 1px solid #5c6ac4
  background: #5c6ac4
  border-radius: 5px
  box-shadow: 0 0 20px rgba(0,0,0,0.2)
  padding: 10px 15px 10px 15px

.btn:hover
  background: #212b35
  transition: background-color .6s ease-out
<nav class="nav">
          <ul>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Get started</a></li>
            <li><a href="#" class="btn">Hire me</a></li>
          </ul>
        </nav>

I've created an image showcasing my specific issue.

htmlcss

Answer №1

The color has already been defined in .nav ul li a. You can either override it by adding color: white !important to .btn or restructure your code.

Dealing with numerous !important tags in a CSS file can be challenging, especially in larger projects, so it's best to avoid them when possible.

Answer №2

To enhance the design, simply add color: white; to .btn {..} within the CSS file. Ensure to include comments in the CSS code using /* comment */:

.btn {
  color: white;
  width: 160px;
  height: 20px;
  /* border: 1px solid #5c6ac4; */
  background: #5c6ac4;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  padding: 10px 15px 10px 15px;
}

Answer №3

When working with preprocessor code, it is important to convert it to CSS before use. In CSS, comments are written as /*...*/ and rules are structured like .btn{ key:value; }

After converting the Sass code to CSS, the result would be:

/* Navigation */
.nav ul {
  display: flex;
  padding-left: 0;
  padding-top: 15px;
}
.nav li {
  list-style: none;
  padding: 10px;
}
.nav ul li a {
  text-decoration: none;
  color: #000000;
}
.nav ul li:last-child {
  color: #FFFFFF;
}
.nav ul li a:hover {
  color: #5c6ac4;
}
.nav li:not(:last-child) {
  margin-right: 20px;
}
.nav li:nth-child(3) {
  margin-right: auto;
}
/* Button */
.btn:hover {
  background: #212b35;
  transition: background-color .6s ease-out;
}

a.btn {
  width: 160px;
  height: 20px;
  /*border: 1px solid #5c6ac4;*/
  background: #5c6ac4;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  padding: 10px 15px 10px 15px;
}
<nav class="nav">
  <ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get started</a></li>
    <li><a href="#" class="btn">Hire me</a></li>
  </ul>
</nav>

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

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

htmlcsssvg

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss

Difficulty in obtaining the child index upon clicking

I am currently working on retrieving the index of a child element within a parent element. While following a solution here, I encountered an issue with an infinite loop. This is the code I have written so far: var div = document.getElementById("spans ...

javascripthtml

The input values are displayed in a continuous line without any breaks between them

I'm currently learning ReactJS and I have created a simple example to practice. The goal is to display each input value (separated by whitespace) in an HTML element (<h1>). However, instead of showing each output value individually, they disappe ...

htmlreactjs

Is there a way to access the font characteristics of a website?

I'm currently in the process of customizing my WordPress theme and I'm looking to adjust the font sizes for certain elements such as pagination. However, I'm finding the style.css file to be quite convoluted and I'm having trouble ident ...

csswordpress

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

javascripthtmlreactjsmaterial-uiaccordion

What is the reason behind the varying dimensions of images on Chrome compared to Firefox?

I've been working on enhancing my web development skills and decided to create a personal portfolio. During the development process, I focused mainly on Firefox as my browser of choice. One section of the portfolio includes showcasing my skills using ...

cssgoogle-chromefirefoxflexbox

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

htmlcss

Adding a timestamp to the src URL in HTML: A step-by-step guide

Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...

htmlcachingbootstrap-4frontend

Integrating CSS into dynamically generated table rows using jQuery

Having trouble applying CSS to table rows created via ajax request. Despite using jQuery to add CSS to newly generated rows, it only affects the existing table headers. The table already has a 'sortable' class which also doesn't apply to dy ...

jquerycssajax

Creating a Web Form in Outlook Using the POST Method

Seeking help in creating an HTML email featuring two interactive buttons - Approve and Reject. I have successfully generated the HTML email and sent it to Outlook. Snapshot: https://i.sstatic.net/NrGFM.png The HTML code within the email: <!DOCTYPE ...

htmlformsemailoutlook

Is there a fixed header table feature that comes built-in with HTML5?

Is there a native feature in HTML 5 for implementing a fixed header table with a scrollable tbody, while keeping the thead and tfoot fixed? ...

html

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

javascripthtmlcssjsontemplates

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

cssruby-on-railsfonts

Submitting a form and using Ajax to upload an image

Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...

javascriptjqueryhtmlajax

Initializing an HTML5 video player directly from an Array

I am trying to populate a video player on my webpage with an array of videos. Here is the code I have so far: var current = 0; var videos = ["01", "02", "03", "04"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomInde ...

javascriptarrayshtmlvideodynamic

Looking for assistance with a PHP program that involves if-else statements

<HTML> <body> <?php echo "<H4>Do you identify as male?</h4>" ?> <form action ="ifstat.php" method ="post"> Please enter your response: <input type="text" name="val1"> <input type ="submit" > <inp ...

phphtmlxampp

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss