Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: incrediBILL

Message Too Old, No Replies

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

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

Junior Member

5+ Year Member

joined:May 17, 2007
posts: 101
votes: 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>">
12:54 am on June 21, 2012 (gmt 0)

Administrator

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

joined:Aug 10, 2004
posts:10542
votes: 8


try putting a class on the input element and specify your preferred style using css.
4:04 pm on June 21, 2012 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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>
10:21 pm on June 21, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:May 17, 2007
posts: 101
votes: 0


geourgeous! awesome! many thanks