[TheDarkNight]

How to make a red button like goggles Sign In button.Feel free to see the working version http://backend-web-developer.tk/Login/

This is what the finished project should look like:


Make a form with the input type with submit,Then proceed to name the class red-btn

Code:

<form> <input type="submit" class="btn-red" value="Login"> </form>

The css.btn-red is the class.We have set the height and width to 30px and width to 100px this field is pretty self explanatory to know what these options do.We then remove the border with border:none; to remove the border from the button.We then set the background to webkit gradient.

Code:

.btn-red{height:30px;width:100px;border: none;color:white;weight:300;background: -webkit-gradient(linear, left top, left bottom, from(#DF0101), to(#B40404));}

For the hover we just add a one pixel small drop shadow

Code:

.btn-red:hover {box-shadow: 1px 1px 1px #888888;}

This will only work for chrome i edited it to make the post look better but if you want to make it work one all browsers visit http://www.colorzilla.com/gradient-editor/ and replace background with the code it gives you

[TheDeceptionist]

Try to explain better and make the code look simple i.e , arranged.
Besides that , God tut.

[Psycho_Coder]

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

[Psycho_Coder]

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

[TheDarkNight]

I will update it as soon as I'm on my pc

---

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

The image is working for me ?

[TheDarkNight]

I will update it as soon as I'm on my pc

---

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

The image is working for me ?

[Psycho_Coder]

I will update it as soon as I'm on my pc

---

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

The image is working for me ?

Here have a look

Spoiler:

[TheDarkNight]

I will update it as soon as I'm on my pc

---

You should provide the screenshot of your Login Form. The code should be organized with proper indentation. Even the image in your post has link error. Please update the thread to make it more readable

The image is working for me ?

Here have a look

Spoiler:

I'll try changing image hosting