Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Emily Easton
Emily Easton
13,575 Points
Posted by Emily Easton
Emily Easton
13,575 Points

How to get rid of box shadow on a button -Bootstrap

I've done a lot of googling and I still can't seem to get rid of the box shadow on the button whilst keeping the button square. I've also tried creating a class (which isn't shown) and putting in box-shadow: none; but that didn't work either. Please help! Also, general advice on my code is welcome!

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- /Required meta tags -->

    <!-- Links -->
    <link rel="stylesheet" href="custom.css">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Lobster|Questrial" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="custom.css">
    <!-- /Links -->

    <title>text</title>

</head>

<body>
    <div class="no-gutter px-2 my-col">
        <div class="my-col row">

            <div id="left" class="col-8 bg-secondary">
                <h2 class="text-white lobster">text</h2> 
            </div>

            <div id="right" class="col-4 bg-light">
                <nav class="nav no-gutters mb-40">
                    <a class="nav-link active text-dark col-4 text-left questrial" href="#">about</a>
                    <a class="nav-link text-dark col-4 text-center questrial" href="#">products</a>
                    <a class="nav-link text-dark col-4 text-right questrial" href="#">contact</a>
                </nav>

                <h3 class="bakerville">text text text text text text <br>text text text text text text </h3><br>
                <h5>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </h5><br>
                <h5>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </h5><br>
                <h5>text text text text text text text text text text text text text text text text text text </h5><br>
                <h5>text text text text text text text text text text text text </h5>
                <button type="button" class="btn-square  px-5 py-3 mt-20" id="questrial">MAKER RESOURCES</button>

            </div>
        </div>
    </div>
</body>

</html>

Custom CSS:

/* Body */
html, body {
    height:100%;
}


/* Fonts */
.lobster {
    font-family: 'Lobster', cursive;
    font-size: 3.5em;
}
.bakerville {
    font-family: 'Libre Baskerville', serif;
}
.questrial {
    font-family: 'Questrial', sans-serif;
}

/* Left Div // Right Div */
#left {
    padding: 4.5em;
}
#right {
    padding: 4.5em;
}

/* Rows // Columns */
.my-col { 
    height: 100%; 
}

/* Custom Margin & Padding */
.mt-20 {
    margin-top: 10%;
}
.mb-40 {
    margin-bottom: 40%;
}

2 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Emily,

I don't see a box-shadow on your button. There's just a border. I could be misstaken, of course. But i tried your code in a codepen and there's just a border showing. By default, the btn class makes the border have a property of 0 and adds a small border-radius. You can counter that by adding a class of your own and defining another border-radius.

Sometimes you need to use !important to make sure your css overwrites the bootstrap css. It's a good thing to read about CSS specificity to make sure you don't have to use !important that often.

Try your html like this:

<button type="button" class="btn btn-square px-5 py-3 mt-20" id="questrial">MAKER RESOURCES</button>

And add this to your css:

.btn-square {
  border-radius: 0 !important;
}
Emily Easton
Emily Easton
13,575 Points
Emily Easton
Emily Easton
13,575 Points

Hello,

I've just tried that and it hasn't worked. I'm using bootstrap though so I'm guessing. its something on there thats making it not work.

Elad Ohana
Elad Ohana
24,456 Points
Elad Ohana
Elad Ohana
24,456 Points

Hi Emily,

As Elian said, there is no box-shadow around the button, it's just a border. I'm not sure the border-radius is the issue you're trying to solve though (which would just make your button round at the corners. What you seem to be trying to do is get rid of the black border around the button. I think the easiest way to do so would be selecting the ID of "questrial" and removing the border. This has the added benefit of not being overridden by a class attribute, as IDs are more selective. Try either of these codes:

#questrial {
  border: none;
}

or 

#questrial {
  border: 0;
}

Hopefully these will provide the effect you're looking for.

Elad.