How to make text in submit form, to be bigger size?

Forum Moderators: open

Message Too Old, No Replies

How to make text in submit form, to be bigger size?

basketmen

11:59 pm on Jun 20, 2012 (gmt 0)

This is a normal submit form

<input type="submit" value="Click here">

i want to make the text 'Click here' to bigger size, any methode is ok.
i already tried using these below, but still not the right way

bold code <b>

<input type="submit" value="<b>Click here</b>">

or big code <big>

<input type="submit" value="<big>Click here</big>">

or h1 code <h1>

<input type="submit" value="<h1>Click here</h1>">

phranque

12:54 am on Jun 21, 2012 (gmt 0)

try putting a class on the input element and specify your preferred style using css.

rocknbil

4:04 pm on Jun 21, 2012 (gmt 0)

You're trying to apply HTML elements in an element attribute which obviously won't work. One of the challenges in styling buttons is that by default they are inline elements, so there will be oddities when you style the size of the type inside the buttons; be sure to set the display to block (and sometimes remove the border, as below.)

The tested code below will render as a round cornered gradient submit button with mouseover effects, where you can access the button text and style it appropriately.

In exchange, please don't use "Click Here [w3.org]" :-)

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#mybutton {
display: block;
width: 6em;
height: 2em;
border: none;
padding:0;
text-align:center;
font-size: 1.5em;
line-height:1.5em;
color:#fff;
cursor:pointer;

-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;

background-image: linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -o-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -moz-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -webkit-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -ms-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(58,83,186)),
color-stop(0.49, rgb(127,187,240))
);
}
#mybutton:hover {
color: #000080;
background-image: linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -o-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -moz-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -webkit-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -ms-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(120,146,250)),
color-stop(0.49, rgb(182,244,252))
);
}

form { width: 6em; margin:auto; }
</style>
</head>
<body>
<form action="">
<p><input type="submit" id="mybutton" value="submit"></p>
</body>
</html>

basketmen

10:21 pm on Jun 21, 2012 (gmt 0)

geourgeous! awesome! many thanks