[Solved] Need help styling a button!

[andonbray]

I’ve been trying to make an email submission form look like a contact form, but it’s not working, and I’m not sure why.

The contact form that I’m trying to copy is on this page, and the email submission is on the sidebar.

Here is my efforts so far: http://codepen.io/andonbray/pen/nqxwe

As you can see, I have the default button stuck in the middle, and I can’t figure out what’s wrong with it. The other thing is that I want the submit button to be inline with the field.

Please help!

[burr]

I will give you a start:

First you are styling the p which is the parent of your input.

Try this, it is not in anyway complete:

#subscribe-submit input {
  background: #20aab9;  
  color: #fff; 
  padding: 8px 6px;
  border: none;
  border-radius: 5px;
  -webkit-appearance:none;
}

I’m not sure but it looks like you have just copied the html from another source, because to make this all you probably need is two input fields one as type=submit and one as type=text OR use html tags <textarea> and <button>

Edit:
Try this

[andonbray]

Your right, I did copy the html, because it was part of the plugin, and I didn’t want to create additional problems.

[burr]

Here you go

Things to note:
– Only prefixed for WebKit
-Placeholder text is not supported in all browsers

[andonbray]

I think I got everything figured out. I decided against making it all inline. Thanks burr.

[Author]

Posts