Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either.

My goal is to have the left 'input type="submit' button look just like the 'a href=""' button. Any suggestions?

View the problem in the code example on JSFiddle: http://jsfiddle.net/aL6M6/7/

The CSS code is identical for .button-big and .button-big-submit

Thank you!

    .button-big
{
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    font-weight: 300;
    padding: 15px 45px 15px 45px;
    outline: 0;
    border-radius: 10px;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
    background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
    background-image: linear-gradient(top, #ed391b, #ce1a00);
    text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}

.button-big:hover
{
    background: #fd492b;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
    background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
    background-image: -o-linear-gradient(top, #fd492b, #de2a10);
    background-image: linear-gradient(top, #fd492b, #de2a10);
    text-decoration: none;
}

.button-big:active
{
    background: #ce1a00;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
    background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
    background-image: linear-gradient(top, #ce1a00, #ed391b);
}
htmlcssinputform-submitappearance

Answer №1

Why did you decide to create two different styles when the intention was for them to be identical in appearance?

To address this issue, I included a CSS reset at the beginning and swapped out the input with a button element. This adjustment has made the styles almost indistinguishable, although there may be room for tweaking the line height. Nevertheless, I have guided you halfway towards achieving the desired outcomehttp://jsfiddle.net/aL6M6/9/

    border: none;

Answer №2

i identified four issues.

  1. the border needs to be disabled: border: none;
  2. there is a typo in ..button-big-sumbit:hover (which is why the hover effect isn't working)
  3. the padding in .button-big and .button-big-submit differs.
  4. you have applied some styles to all inputs.

check out the fixed version here: fiddle

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200);

body {
    background: #31393c url('images/bg04.jpg');
}

body, input, textarea, select {
    color: #373f42;
    font-size: 1.125em;
    font-family: 'Yanone Kaffeesatz', Tahoma, Arial, Sans-serif;
    line-height: 1.85em;
    font-weight: 300;
}

.button-big {
    cursor: pointer;
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    font-weight: 300;
    line-height : 1em;
    font-family: inherit;
    border: none;
    padding: 15px 45px 15px 45px;
    outline: 0;
    border-radius: 10px;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
    background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
    background-image: linear-gradient(top, #ed391b, #ce1a00);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

.button-big:hover {
    background: #fd492b;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
    background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
    background-image: -o-linear-gradient(top, #fd492b, #de2a10);
    background-image: linear-gradient(top, #fd492b, #de2a10);
    text-decoration: none;
}

.button-big:active {
    background: #ce1a00;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
    background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
    background-image: linear-gradient(top, #ce1a00, #ed391b);
}

Answer №3

I made some enhancements to your CSS code

.button-big-submit {
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    line-height: normal;
    font-weight: 300;
    padding: 5px 15px 5px 15px;
    outline: 0;
    border: 0;  /* updated here */
    padding: 10px 40px; /*revision*/
    border-radius: 10px;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
    background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
    background-image: linear-gradient(top, #ed391b, #ce1a00);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

Additionally, I corrected a typo in .button-big-submit:hover and included cursor: pointer;

Check out the updated fiddle: http://jsfiddle.net/aL6M6/12/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

javascriptcssvue.js

Is there a way for me to insert PHP code into a file that has been generated by PHP?

I have encountered an issue where PHP files seem to convert all PHP code into emptiness. Despite creating a PHP file, adding PHP and HTML code to it, and then closing it, the code does not appear as expected in the file. I attempted a solution which is det ...

phphtmlfopenfwritefgets

Using JavaScript to toggle the iron-collapse property

I've implemented multiple <iron-collapse> elements with unique IDs, each one corresponding to a <paper-icon-button>. On screens wider than 650px, I can interact with the <iron-collapse>s using their respective buttons. But on narrow ...

javascripthtmlpolymerpolymer-1.0

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

What could be causing my textarea-filling function to only be successful on the initial attempt?

Programming: function updateText() { $("body").on("click", ".update_text", function(event) { $(this).closest("form").find("textarea").text("updated text"); event.preventDefault(); }); } $(document).ready(function() { updateText(); }); H ...

javascriptjqueryhtml

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

Unable to set width for td element in media query is not functioning as expected

Is there a way to adjust the width of td elements for smaller screens within an email template? I have tried setting the style as important, but it doesn't seem to be working. CSS .alignmentColumn { width: 25% !important; //for desktop @med ...

htmlcss

Toggle the visibility of the navigation bar in Angular based on the user

I have implemented rxjs BehaviorSubject in my login page to transmit data to auth.service.ts, enabling my app.component to access the data stored in auth.service.ts. However, I now require the app.component to detect any changes made to the data in auth.se ...

htmlangulartypescript

Using jQuery to Drag: Creating a draggable effect on a div element

I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...

jqueryhtmlcssdrag

drag and drop feature paired with additional textarea below

query 1: How can I make the bottom-left textarea move together with the top-left textarea when I drag it down? query 2: What is the solution to prevent the left-bottom textarea from moving when I drag down the top-right textarea? http://jsfiddle.net/4BX6 ...

htmlcss

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

Steps for designing a single-column content-focused layout

Creating a single column fixed-width layout with a header and footer, the order of view should be as follows: header navigation dynamic content 1 dynamic content 2 main content footer The dynamic contents (3, 4, 5) will expand vertically with unknown he ...

htmlcss

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

Showing a confirmation message to the user upon clicking outside of a specific section

On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...

javascriptjqueryhtmlangularjs

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

jqueryhtmlcssjssor

Tips for making a hide and reveal FAQ section

Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality p ...

javascriptjqueryhtmlcss

How can I use AJAX to remove a record from a MySQL table?

I am looking to create a button with an image X that, when clicked, will delete a row from the database at that exact moment. teste-checkbox.php <style> table { font-family: verdana; font-size: 12px; } table th { text-align: left; backgrou ...

phpjqueryhtmlmysqlajax