Welcome to WebmasterWorld Guest from 54.226.130.194

Forum Moderators: incrediBILL

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)

5+ Year Member



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)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



geourgeous! awesome! many thanks