CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Suraj
Suraj

Reputation: 2563

make a button similar to the span in html

I have a button like below with me.

<button type="submit" class="search-btn" id="search-submit-header"></button>

It has certain functionality which I want to apply to this span so that It does the same work as the button. I want to use the CSS of the span.

<span class="search-btn">
    <a href="#"><i class="fa fa-search"></i></a>
</span>

How can I get this. i.e. Functionality of the button working on the span.

Apologies for a dumb question.

Upvotes: 0

Views: 2215

Answers (3)

vje1998
vje1998

Reputation: 691

Simply put the style info to anchor tag. For Example check below line

<a href="#" class="search-btn">
    <i class="fa fa-search"></i>
</a>

Note: Clear all the style information of anchor tag and write supporting javascript code 

   function doSomething(){
     //your code
    }
   $('.search-btn').click(doSomething);

Upvotes: 1

Raman Sahasi
Raman Sahasi

Reputation: 31901

  1. Find what css is currently applied on your <button> element.

    There are several ways to do it but the most simple one is (in chrome) you can right-click > inspect element > press "ctrl + shift + c" and click on button > elements tab > Computed tab (on RHS) and see what css is currently applied.

  2. Copy major properties of css from there and apply them on span.search-btn class in css.

    for example: 

    span.search-btn {
    width: 20px;
    height: 10px;
    border: 1px solid black;
    padding: 20px;
}

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 20016

Try something like this

<!DOCTYPE html>
<html>

<body>
    <style>
        .ButtonSpan {
            /*width: 500px;
            height: 500px;*/
            border: 1px solid black;
            background: #e0e0e0;
            padding: 25px;
        }
    </style>
    <button type="submit" class="ButtonSpan">test</button>
    <span class="ButtonSpan">test</span>

</body>

</html>

Upvotes: 0

Related Questions