Removing the shadow from a button

Question

The button I want is the one at bottom, but the one I have is the top.

The problem arises from the fact that the top button in HTML:

<form class="button_to" method="get" action="/"><input type="submit" value="Ok" /></form>

and the bottom button in HTML:

<button type="button">Ok</button>

The CSS for the top button is:

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

The CSS for the bottom button is:

.signup-success button,
.signup-success button:active,
.signup-success button:focus {
  margin-top: 15px;
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

If it helps the top button is generated from rails .erb extension

<%= button_to "Ok", root_path, :method => :get %>

Help me to get my top button look like bottom button. I've tried to put in code that disable shadows in CSS, but it didn't work :(

Try putting a border: none; first, and then setting your border after it. border:none; border: 2px solid #00aa66; — Andrew Ice, Sep 08 '15 at 14:01
Try setting the border-width property.... Play with different values. — random, Sep 08 '15 at 15:04

score 37 · Accepted Answer · answered Sep 08 '15 at 13:57

37

Use border-style:

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
  border-style: solid;
}

or combined version (border-style, border-width and border-color in one):

border: 2px solid #00AA66;

answered Sep 08 '15 at 13:57

Jevgenijs Šulins

614
5
5

with a little bit of border-radius and height fiddling, I got the exact shape I wanted. Thanks! and lol easy solution, guess I was impatient since I've been coding for a long time. – LarsChung Sep 08 '15 at 15:37
complete brain lapse today, thank god for this simple answer. – Ryan Kozak Aug 17 '17 at 22:05
Thank you so much for this answer! Trying to figure this minor issue out for a few days now. – Rishi Surana Dec 11 '20 at 13:25
border-style: solid; is what did it for me – Max Dec 17 '21 at 12:39

score 9 · Answer 2 · answered Jun 27 '18 at 07:21

9

Or you can simply give border: none to your button

answered Jun 27 '18 at 07:21

Aayushi

1,736
1
26
48

score 6 · Answer 3 · answered May 26 '20 at 10:18

6

Just add a border of your own.

border: 1px solid black;

Or remove the border.

border: none;

answered May 26 '20 at 10:18

José Rasmussen

131
2
5

score 1 · Answer 4 · answered Feb 26 '19 at 23:25

1

Funny enough adding a border to the button fixed safari's weird drop shadow.

border: 1px solid #34c1e5;

answered Feb 26 '19 at 23:25

Dan Kaiser

991
8
7

Removing the shadow from a button

4 Answers4