Creating a custom design for a button using an external CSS file

I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file.

Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless the style is directly in the HTML file.

Here's the HTML snippet:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
    <input type='button' id='button' class="button" value='Button' onclick='AddOne()'>
    (function defined here, works correctly)
</body>
</html>

The CSS stylesheet contains the following styles for the button:

.button {
    background-color: #CCCCCC;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
  background-color: #535362;
}

If I manually add the button styles within the HTML file itself, it displays correctly. However, I'm looking for a solution that doesn't involve adding the style block each time I use a button to avoid repetition and keep the styling centralized in the CSS file.

Answer №1

Welcome to Stack Overflow _

Your CSS code should include the 'button' class like this

.button {
    background-color: #CCCCCC;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
  background-color: #535362;
}

Here's an example of the snippet >>>

.button {
    background-color: #CCCCCC;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
  background-color: #535362;
}
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
    <input type='button' id='button' class="button" value='Button' onclick='AddOne()'>
    (function defined here, works correctly)
</body>
</html>

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

Retrieve information from a JavaScript file to incorporate into an HTML file

Seeking a solution to store the base URL in a separate JavaScript file, I've implemented a JavaScript file named config.js containing: export const baseUrl = "https://example.com/"; There are multiple HTML files utilizing this base URL for ...

Tips for adjusting the hue of a single color in a JPEG image

Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

Showcasing PHP variables within HTML using jQuery

I am currently looking for the best way to showcase information stored in a PHP variable, retrieved from a MySQL database. My initial thought was to use jQuery. Here are my questions: When a user inputs a number into a field, I receive that Member' ...

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

Styling with CSS Variables and Transforming Elements

After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?" Within the HTML header, three CSS variables and their fallback values are declared: ...

Generating forms dynamically with Vuetify

When working with HTML code, the structure looks like this: <v-col cols="12" md="4" v-for="(leadObj, i) in lead.data" :key="i" > <v-col v-if="leadObj.inputType !=='select'"> ...

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

Mastering the Art of Positioning Arrows in Post Car

I am currently facing an issue with my post carousel. The carousel has two arrows on the side, and I have designed a background in the shape of circles for these arrows. However, I can't seem to figure out how to center the arrows inside the circles. ...

Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head></head> <body> <iframe src="htt ...

Developing an interactive selector within the on() event handler

My goal is to utilize the on() event for managing dynamically created code. It functions properly when the selector is hardcoded in the on() event. However, I aim to enable it to select different elements depending on which box they choose. $("body").on( ...

How to Customize Headers with Color and Size in MKDocs

In the following code, you'll find instructions for adjusting a dropdown menu that displays an image when expanded. The challenge is to reduce the size of the banner by half and remove the pencil icon on the left side. How can we modify the code so th ...

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

refers to the spacing between elements

I currently have 4 nested divs. My goal is to ensure that the margins between each div are equal, maintaining the same distance from the left edge of the parent div to the first nested div, between each pair of nested div, and from the last nested div to t ...

Is there a way to add a delay when opening all of the links on my web page

Has anyone experimented with implementing time delays on global links before? I am aiming to have all my links open with a delay in order to create a smoother transition between pages for an artistic touch. However, I seem to be encountering some issues ma ...

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...