Twitter Bootstrap Question posted in

Chrome ignoring <button> css-Twitter bootstrap

Even the simplest custom button, such as
<button class="button-new">Test button</button>
shows up as the chrome default button. My button-new css looks like this:

.button-new{
  padding: 45px;
  border-color: black;
  background-color:#444;
  color: white;
}

I am using codepen.io, then uploading to a web-server using ftp. On codepen, it looks fine. When i visit the webpage, it ignores my styling, but only on the button.

The site is fsleague.website if you’d like to take a look for yourself.
Here is the site html, as it appears on the web:

<html lang="en"><head>
<meta charset="UTF-8">
<title>A Pen by  John Manos</title>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">
<style></style></head>

<body>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
        <div class="container-fluid">
            <div class="well outter-well">
                <div class="row">
                    <h1 class="text-center ubuntu-font"><strong>Fantasy Stock League</strong></h1>
                </div>
            <button class="button-new">Please work</button>
            </div>
        </div>

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Clearing chrome's cache fixed the problem. I think the page was loading an old css file from the cache instead of loading any edited css file.


  2. 0

    Try setting 

    -webkit-appearance: none;

    Also when you’re deploying publicly (production code), consider using a library like normalize.css. It’ll reset all default browser applied styles and other inconsistencies for you. Load this BEFORE all your css:

    Normalize CSS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search