CODEWITHSUNDEEP
htmlcssbutton
Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

How to make a text or html tag look like a button

I want to show a p tag or legend tag or any html text like button. But how is it possible? I have tried with css but not working well. I want to show it like button.

<p class="button" >Submit</p>
or 
 <a class="button" >Submit</a>
 or
<legend class="button" >Submit</legend>

enter image description here

Now need the button class.

Upvotes: 1

Views: 14623

Answers (6)

Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

Had just got what did I want.

DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}

Upvotes: 0

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

I think you should use this code and it is working well. You can change Color according to you.

Live Demo

HTML Code:

<input class="round-button-circle" type="submit" value="Submit"/>

CSS Code:

.round-button-circle {
width: 150px;
height:50px;
border-radius: 10px;
border:2px solid #cfdcec;
overflow:hidden;
font-weight: 15px;
background: #4679BD; 
box-shadow: 0 0 3px gold;
}
.round-button-circle:hover {
    background:#30588e;
}

Result:

result

Upvotes: 0

Hanzallah Afgan
Hanzallah Afgan

Reputation: 734

<p class='button'> Submit </p>

.button{
        background: -webkit-linear-gradient(top, #CCB5B6 20%, #274936 70%);
        width: 100px;
        height: 40px;
        font-family: sans-serif;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
        color: #96F256;
        border-radius: 10px;
        box-shadow: 0 2px 5px 3px black;
        cursor: pointer;
    }
    .button:hover{
        color: white;
    }

OUTPUT

enter image description here

Upvotes: 1

KesaVan
KesaVan

Reputation: 1031

Try This.

Here is the Working FIDDLE

CSS

  .button {
  width: 75px;
  background: #d2d2d2;
  text-align: center;
  float: left;
  color: #000;
  line-height: 32px; 
  text-decoration: none;
}
.button: hover{
  width: 75px;
  background: #0e567f;
  color: #fff;
  text-align: center;
  float: left;
  line-height: 32px;
  text-decoration: none;
}

Upvotes: 1

Munshi Azhar
Munshi Azhar

Reputation: 317

It is simple with css.

<p class='btn'> Button 1 </p>

And Your CSS

.btn{
float:left;
width:auto;
height:30px;
display:block;
border:1px solid #ff6600;
background:#00ff00;
color:#000;
line-height:30px;
text-align:center;
padding:0 20px;
border-radius:3px;
}

.btn:hover{
 cursor:pointer;
}

jsfiddle : http://jsfiddle.net/ob67xnw4/1/

Upvotes: 1

jmore009
jmore009

Reputation: 12923

Just apply css styles and cursor: pointer; to it to make it appear that it's a button

.button{
  display: inline-block;
  background: #000;
  border-radius: 4px;
  font-family: "arial-black";
  font-size: 14px;
  color: #FFF;
  padding: 8px 12px;
  cursor: pointer;   
}

JSFIDDLE

Upvotes: 2

Related Questions