Stylesheet for Foundation Buttons in CSS/SASS

I am currently working on customizing the appearance of Zurb Foundation using SASS/CSS. However, I am facing an issue with the buttons. There seems to be a highlight at the top of the buttons that gives them a traditional button look, which I want to remove. Even though I am using SASS to manage the CSS, I am unable to locate where this highlight is coming from.

You can view the button highlight on this link:

I have attempted to use developer tools in IE and Chrome to identify the source of this highlight, but with no success. Does anyone have any suggestions on how to eliminate the highlight at the top of the button?

csssasszurb-foundation

Answer №1

To eliminate the highlighted effect, simply get rid of the box-shadow at the top border.

If you are using SASS/COMPASS: @include box-shadow(none) will take care of it. Therefore, the entire solution involves adding

.button {
    @include box-shadow(none)
}

to your SASS file.

Answer №2

The source is the box-shadow property. To implement, use the code snippet below:

.button {
    box-shadow: none;
}

Answer №3

Include the following code snippet in your CSS stylesheet:

.button {
    text-shadow: none;
}

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

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

cssgwtgwtbootstrap3

Creating dynamic Bootstrap table columns with consistent widths for each column without the use of JavaScript

I'm trying to create a table with a dynamic number of columns using html/css/Bootstrap without relying on Java Script. The table should span 100% of the parent container's width. Each column in the table should have an equal width (3 columns = ...

htmlcssbootstrap-4

The changing of colors does not function properly when clicked in JavaScript

I am having an issue with a drop-down list that offers two options: blue and green. When I select blue and click on the text input field, its background color alternates between blue and black (the default text field color). The same applies when I choose ...

javascriptjqueryhtmlcss

Apply a CSS class to the selected radio button when retrieving row data from the table

How can I dynamically add a CSS class to a snippet of code when a radio button is selected? Here's the jQuery Snippet: $(document).ready(function (){ $("input:radio").click(function () { if ($(this).is(":checked")) { var empid ...

jquerycssradio-button

Designing an immersive full-screen experience with scrollable columns using Bootstrap

Trying to achieve a full-screen layout that occupies 100% of the viewport with a sticky header and footer, along with columns in the main content area that can be individually scrolled. I've been experimenting with using classes like .h-100 and .flex ...

csstwitter-bootstrapflexboxbootstrap-4

How can I create a static navigation bar and sidebar using Bootstrap 4?

Currently, I am utilizing HTML, Javascript, Bootstrap, and CSS to develop a fixed navbar and sidebar for our system. My objective is to ensure that the navbar and sidebar remain fixed even when users scroll down the page, while also maintaining responsiven ...

javascripthtmlcssbootstrap-4

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

htmlcssimage

What is the best way to include a padding at the top of the second row?

I have two rows with three columns each. I am trying to create some spacing between the two rows. I attempted to achieve this by wrapping the rows and adding padding to the last child (which should be the second row). However, this approach did not work a ...

htmlcss

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

What is the recommended approach: incorporating SCSS with material-ui, or sticking to material-ui's built-in

Can anyone provide insight on whether it's better to use material-ui styles or scss for a project? I've noticed some projects transitioning to MUI-based styles instead of scss, and after reviewing the documentation [https://mui.com/system/styles ...

reactjssassmaterial-ui

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

javascriptjqueryhtmlcss

Dynamic header showing various sections of the image depending on screen size

Looking to create a responsive header image for my website using the 'mobile first' approach. I have a specific picture in mind that I want to display differently depending on the device's screen size, all while using the same image file. Fo ...

htmlcsstwitter-bootstrapfrontendbootstrap-4

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

htmlcss

Aligning a title and a subheading in a horizontal manner

I want to align my h3 headings with my h5, using Bootstrap, so they are on the same line. UPDATE: I aim to leverage existing Bootstrap functionality and avoid modifying CSS unless absolutely necessary. Here is a screenshot illustrating what I mean: https ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be rea ...

css

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...

htmlcssgithub-pages