Getting CSS issue with html submit button

Question

I have created CSS button from this site cssportal.com but after adding to my site I am getting different from original created. Why I am getting border from left and top.

Original View:

enter image description here

but currently I am getting this:

enter image description here

My Fiddle: Sample

Which browser are you trying it in?

ckv
– ckv

2013-11-08 08:38:58 +00:00
Commented Nov 8, 2013 at 8:38 — ckv
– ckv, Commented Nov 8, 2013 at 8:38
jsfiddle.net/xm73g/5

Simon Dragsbæk
– Simon Dragsbæk

2013-11-08 08:43:36 +00:00
Commented Nov 8, 2013 at 8:43 — Simon Dragsbæk
– Simon Dragsbæk, Commented Nov 8, 2013 at 8:43

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Give a border: 0; to the CSS...

Preview

Normal and Hover versions:

Fiddle: http://jsfiddle.net/xm73g/3/

.wpcf7-submit {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #FFFFFF !important;
    font-size: 15px;
    text-shadow: 1px 1px 0px #3498DB;
    text-transform:uppercase;
    padding: 10px 40px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 0;
    background: #3498DB;
    background: linear-gradient(top, #3498DB, #3498DB);
    background: -ms-linear-gradient(top, #3498DB, #3498DB);
    background: -webkit-gradient(linear, left top, left bottom, from(#3498DB), to(#3498DB));
    background: -moz-linear-gradient(top, #3498DB, #3498DB);
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 8, 2013 at 8:41

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CaptainCarl · Accepted Answer · 2013-11-08 08:39:53Z

1

You forgot the remove the original browser border: http://jsfiddle.net/xm73g/2/

(border: 0px;)

answered Nov 8, 2013 at 8:39

CaptainCarl

3,4996 gold badges42 silver badges74 bronze badges

Comments

Parixit · Accepted Answer · 2013-11-08 08:39:54Z

1

JsFiddle Demo

Its basic style for button, because button acts like your cursor is pressing it and again it came back to original position.

Please add border:none; to your button style.

answered Nov 8, 2013 at 8:39

Parixit

3,8193 gold badges39 silver badges65 bronze badges

Comments

srdjans · Accepted Answer · 2013-11-08 08:40:53Z

0

Put also border:0 to the button and it will work

answered Nov 8, 2013 at 8:40

srdjans

113 bronze badges

Comments

newbie java developper · Accepted Answer · 2013-11-08 08:50:21Z

Add border:none; in the css code like this:

.wpcf7-submit {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    border:none;
    color: #FFFFFF !important;
    font-size: 15px;
    text-shadow: 1px 1px 0px #3498DB;
    text-transform:uppercase;
    padding: 10px 40px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #3498DB;
    background: linear-gradient(top, #3498DB, #3498DB);
    background: -ms-linear-gradient(top, #3498DB, #3498DB);
    background: -webkit-gradient(linear, left top, left bottom, from(#3498DB), to(#3498DB));
    background: -moz-linear-gradient(top, #3498DB, #3498DB);
}
.wpcf7-submit:hover {
    color: #FFFFFF !important;
    border:none;
    background: #468CCF;
    background: linear-gradient(top, #468CCF, #63B8EE);
    background: -ms-linear-gradient(top, #468CCF, #63B8EE);
    background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
    background: -moz-linear-gradient(top, #468CCF, #63B8EE);
}

Collectives™ on Stack Overflow

Getting CSS issue with html submit button

5 Answers 5

Fiddle: http://jsfiddle.net/xm73g/3/

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Fiddle: http://jsfiddle.net/xm73g/3/

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related