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

Internet Explorer Fails to Display CSS Background Images

Requesting assistance, The issue I am facing is that the background image is not displaying in Internet Explorer, although it appears perfectly fine in Safari. I have conducted thorough checks with W3C CSS validation and HTML validation, confirming that ...

htmlcssinternet-explorer

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

javascriptjqueryhtml

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular: <Switch class="switch" formControlName="answer"></Switch> One approach involves targeting the switch with checked attribute, setting its background-color and text color accord ...

cssangularnativescriptnativescript-angular

What is the process for transferring a JavaScript file (containing multiple functions) from the server to the client side?

I am looking for a way to hide the server-side functionality from the end user in order to maintain privacy. I have not been able to find a solution for this issue thus far. Currently, I have a .js file containing functions that are used within an html5 f ...

javascriptjquerynode.jshtml

Designing the button outline variant with Material-UI styling

I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...

cssreactjsmaterial-ui

Troubleshooting issue with Bootstrap slider: CSS display problem

After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additional ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles

Trigger the OnAppend event for a jQuery element upon its insertion into the DOM

After writing a code snippet that generates custom controls, I encountered an issue where the custom scrollbar was not being applied because the element had not yet been appended to the DOM. The code returns a jQuery element which is then appended by the c ...

javascriptjqueryhtml

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

jqueryhtmlcss

Using Angular to store checkbox values in an array

I'm currently developing a feature that involves generating checkboxes for each input based on the number of passengers. My goal is to capture and associate the value of each checkbox with the corresponding input. Ultimately, I aim to store these valu ...

javascriptangularinputevent-binding

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

javascriptjqueryhtmlcss

What is a reliable method for automatically refreshing a webpage despite encountering server errors?

I'm working on an HTML+JS web page that refreshes itself automatically every few seconds using http-equiv="refresh". The problem is, sometimes the server returns a 502 "bad gateway" error, preventing the HTML code from loading and causing th ...

javascripthtmlhttphttp-headers

Tips on how to select only the currently active tab and change its background color

I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...

jqueryhtmlcssajax

Blank YouTube Popup Modal

I am in the process of creating a pop-up modal that contains an embedded YouTube video, but my modal is not displaying properly. I am utilizing Bootstrap and have two separate sections along with JavaScript code. When the modal appears, it remains empty. I ...

javascripthtmlbootstrap-4

What is the best way to expand my navigation bar to fill the entire width of my div?

A big shoutout to @seva.rubbo for fixing the issue! Check out the updated code on JSFiddle I recently designed a layout with a fixed width div of width: 900px;. I centered this div, leaving blank spaces on either side. Now, I'm looking to add a navig ...

htmlcssnavigationwidthfill

Scrapy spider malfunctioning when trying to crawl the homepage

I'm currently using a scrapy scrawler I wrote to collect data from from scrapy.contrib.spiders import CrawlSpider, Rule from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor from scrapy.selector import Selector from .. import items clas ...

pythonhtmlweb-scrapingweb-crawlerscrapy

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

htmlcsscss-tables

Filter search results to display only posts

My website uses a custom Wordpress theme that has a search functionality. The issue I'm facing is that when I perform a search, it redirects me to the search.php page. However, instead of just displaying posts, it also shows pages and events from the ...

phphtmlwordpress