Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style submit button? [duplicate]

Tags:

html

css

How to style submit form button? This is possible or I should use the picture(png)? I mean something like this:

enter image description here

like image 204
user2426362 Avatar asked Jun 21 '13 13:06

user2426362


People also ask

How do I customize a submit button?

The simplest way to do this is by using the WordPress CSS Editor. To open this, go to Appearance » Customize and select Additional CSS. Once you've opened the Additional CSS section, you can paste in your new CSS, click the Save & Publish button, and you're all set!

How do I style a submit button in HTML?

Details of the CSS Code for Your Submit Button background – sets up the background color behind the text. color – determines the color of your text. border-style – sets the style of your submits button borders. border-color – sets the color of your submit button borders.

Can a HTML form have 2 submit buttons?

yes, multiple submit buttons can include in the html form. One simple example is given below.

How do you handle multiple submit buttons in the same form?

Create another button with type submit. Also add a 'formaction' attribute to this button and give it the value of the secondary URL where you want to send the form-data when this button is clicked. The formaction attribute will override the action attribute of the form and send the data to your desired location.


1 Answers

Well, You should first know about CSS or Cascading Style Sheets. They are used to style our webpages. Using CSS you can style your button.

Just For Instance:

What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

You can style the button like this:

input[type=submit] {
    border-radius: 5px;
    border: 0;
    width: 80px;
    height:25px;
    font-family: Tahoma;
    background: #f4f4f4;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f4f4), color-stop(100%, #ededed));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f4f4f4 1%, #ededed 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ededed', GradientType=0);
    /* IE6-9 */
}

http://jsfiddle.net/mareebsiddiqui/jGVa3/1

like image 105
Mohammad Areeb Siddiqui Avatar answered Sep 20 '22 01:09

Mohammad Areeb Siddiqui