delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below.

I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button,

meaning I want to remove the background-color and dot symbol.

Code for add to cart:

.product-view .add-to-cart-buttons .button {
    float: left;
    font-size: 14px;
    font-weight: normal !important;
    line-height: 35px;
    min-height: 35px;
    min-width: 120px;
    padding: 0 !important;
    white-space: normal;
    width: 100%;
}

Code for "save design":

#aitcg-control-panel {

    position: absolute;
    right: 200px;
    bottom: 107px;
    z-index: 1; 
    padding: 5px !important;
    background:#ff7704;

}

https://i.sstatic.net/thZe8.png

When I applied the same CSS used for the "ADD TO CART" button to the "SAVE DESIGN" button, it did not work as expected.

Demo Link: Please visit link, you can see the "ADD TO CART & SAVE DESIGN" section in the middle of the page.

htmlcss

Answer №1

Make sure to include the following style in your stylesheet

#aitcg-tooltip .aitcg-button.apply-but {
    background-color: transparent !important;
    border: 0 none;
    color: orange;
}
div#aitcg-control-panel .aitcg-button {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #fff;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    min-height: 26px;
    padding: 0;
    width: 120px;
}
#aitcg-control-panel button:nth-child(2) {
    display: none;
}

If you have any questions, feel free to reach out. Hope this information helps. Thank you!

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

Hexagonal design reminiscent of a beehive

I am struggling with implementing a specific layout using grid CSS and I'm open to using flex or any other method. .container { display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(auto-fit, minmax(80px, 80px)); ...

htmlcssgrid

Experiencing problems with CSS compatibility while transitioning from vanilla JavaScript to React

Currently, I am working on revamping the frontend of an app that was initially built with vanilla javascript and transitioning it to a React framework. However, I'm encountering some challenges with styling the HTML elements. Specifically, the textare ...

javascripthtmlcssreactjsjsx

How can I style my tables to have different border spacing between the table head and table body?

When it comes to tables, I want to customize the column spacing in a specific way. I need space between columns in the table header but no gaps between columns in the table body. How can I achieve this by including border space only in the thead section? ...

htmlcss

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

When a link is clicked, it quickly blinks or flashes on the screen

https://i.sstatic.net/cCFmX.gif <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <%= link_to 'FARDIN KHANJANI', root_path, class: 'navbar-brand logo' %> </div> Upon viewing the gif I include ...

htmlcsshyperlinktwitter-bootstrap-4bootstrap-4

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

htmlcssbootstrap-4

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear. Here is the structure of a website: Mainpage (Containing all resources and scripts) All Other pages (HTML only consists of elements of that ...

javascriptphpjqueryhtmlajax

Struggling with transitioning from the Twitter search API to the status API

While using the search API to fetch tweets from a specific user, everything was working flawlessly except for the fact that it couldn't retrieve tweets when the username contained numbers. Based on a suggestion, I switched to using the status API que ...

javascriptjqueryhtmltwitterlocal-storage

Assess how my website is displayed to an algorithm

A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...

pythonhtmlgoogle-app-enginebrowsersearch-engine

Could you assist me in navigating the process of creating a dynamic 10x10 multiplication table using HTML and JavaScript? I'm eager to learn where to begin with this methodology

As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...

javascripthtmloperatorshtml-table

Expanding a list of object arrays through iteration: A step-by-step guide

// Initializing with one object let posi_val=[{top: '3px', left: '2px'}]; // Adding another object in the loop for (let i = 1; i < n; i++) { posi_val.push({ top: `${posi_val[i - 1].top.slice(0, -2) * 2}px`, l ...

javascripthtmlcssarrays

Does CSS media query "@media only screen" only work when I am resizing the window?

I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...

cssfirefox

Tips for arranging links in a vertical layout on a navigation bar that is compatible with every device

I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content. Check out the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcssfrontendbootstrap-5

What is the best way to place an image above a step progress bar?

I need assistance with adding an image or icon above each step in the progress bar. I attempted to insert an image tag, but it ended up next to 'step 1', which is not the desired outcome. .progressbar { counter-reset: step; } .progressbar li ...

htmlcssbootstrap-4

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

htmlcssheaderbootstrap-5

Ways to update the content within an IFRAME using server-side methods

I've searched through many posts, but I still haven't found a clear solution to my problem. Here's what's going on: I have a page with an IFRAME that is pulling content from a different domain. The style of the frame doesn't match ...

javascriptphphtmliframe

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

cssreactjscss-filters

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

Find the IDs of all input boxes that have a specific class attached

Is there a way to retrieve the ID of an input field that has a specific class attribute? For example: <input id="first" class="failed" /> <input id="last" class="failed" /> <input id="city" class="failed" /> <input id="state" class=" ...

jqueryhtmlclassalertattr

Issue with React TSX component in NextJs 14.0.4: Local MP3 files cannot be played, only external online MP3 files work

I have created a component that wraps around HTML audio and source tags. It functions perfectly when playing mp3 files from an external source, like this sound clip . However, it returns a GET 404 error when trying to access local mp3 files. Can anyone exp ...

htmlreactjstypescriptnext.jsaudio