CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the yellow color from the main DIV background shows through?

http://codepen.io/rsvaz83/pen/aORzBy

.back {
  background: #fc0;
}
.button {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  background-color: #007E9F;
  text-decoration: none;
  color: white;
}
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 40px;
  height: 40px;
}
<div class="back">
  <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>

htmlcss

Answer №1

Replace the 1st instance of white with #fc0 (the color of the background bar) in the line below.

background: linear-gradient(135deg, #fc0 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
                                    ^^^^^

The CSS has been updated to simplify it by merging transition rules and removing the unnecessary filter hack, which wouldn't have worked on outdated IEs anyway. Here is the revised code snippet:

.back {
  background: #fc0;
}
.button {
  display: inline-block;
  padding: 1em;
  margin: 1em;
  background-color: #007E9F;
  text-decoration: none;
  color: white;
}
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #fc0 45%, #aaa 50%, #ccc 50%, #fff 80%);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 40px;
  height: 40px;
}
<div class="back">
  <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>

Answer №2

Modify the initial value of the background to a radiant yellow hue.

background: transparent linear-gradient(135deg, #Fc0 45%, #AAA 50%, #CCC 56%, #FFF 80%) repeat scroll 0% 0%;

Answer №3

To customize the color of the folded corner, modify the code in curl-top-left:before:

.curl-top-left:before {  
  [...]
  background: linear-gradient(135deg, REPLACEWITHCOLOR 45%,
                                      #aaaaaa 50%,
                                      #cccccc 56%,
                                      white 80%);
  [...]
}

Replace REPLACEWITHCOLOR with your preferred color code (e.g. #fc0). Keep in mind that transparency is not supported here as the folded corner sits on top of the button. Setting it to transparent will always reveal the button beneath the corner.

Answer №4

If you want to create a unique background effect, consider using a gradient and syncing it with a pseudo element for added visual interest.

.back {
  background: #fc0;
  padding-left: 30px;
  vertical-align: top;
  padding-top: 20px;
  padding-bottom: 20px;
}

.button {
  display: inline-block;
  padding: 1em;
  margin: 0em -2em;
  text-decoration: none;
  color: white;
}

.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  background-image: linear-gradient(135deg, transparent 30px, #007E9F 30px);
  background-position: -20px -20px;
  background-size: 200% 200%;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background-position;
  transition-property: background-position;
}

.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  /* IE9 */
  
  background: linear-gradient(135deg, transparent 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: inherit;
  transition-duration: inherit;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 40px;
  height: 40px;
}

.curl-top-left:hover,
.curl-top-left:focus,
.curl-top-left:active {
  background-position: 0px 0px;
}
<div class="back">HI!
<a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>

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

When I expand the accordion next to it, the accordion disappears, and it also vanishes when I close that accordion

After incorporating accordions into my site, I encountered a peculiar issue (as shown in this video): when I open one accordion, the adjacent accordion also opens unexpectedly. Similarly, closing one accordion causes its neighboring accordion to mysterious ...

javascripthtmlcssaccordion

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

javascriptphphtmlcss

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

javascriptjquerycssajaxzend-framework

The component I created seems to be having trouble recognizing the Slickr CSS that was

I have included Sick carousel's CSS in the root component by importing it like this: import React from 'react' import PropTypes from 'prop-types' import { ThemeProvider } from 'styled-components' import { ...

cssreactjsnext.jsslick.jsreact-slick

Utilizing the empty space to the right of an image in HTML

What could be causing the empty space to the right of my image? This is how the HTML file appears: ... <body> <div class="image"> <img src="image.jpg" alt="Picture here" id="image" align="middle"></img> </div> ...

htmlcssimage

Creating a notification feature for an HTML application

I am in the process of creating an HTML app through intel XDK. While I understand that using HTML to build apps is not as common, it is the language I am most familiar with, along with CSS. One feature I would like to include in my app is a weekly notific ...

htmlioscssipadintel

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

The text displayed on the image is experiencing fluctuations

I am experiencing an issue on my website where the post text fluctuates rapidly when the mouse hovers over the image. I have a site where I display the post text on mouseover of the image. Can someone please help me solve this problem? You can test it by ...

htmlcsswordpress

Utilizing PHP & AJAX to dynamically update JSON files

In the process of creating a game that requires registration for use, I am attempting to add the username and password inputted into a form to my JSON file. The current structure of the JSON file is as follows: { "LogIns":[ { "Username":"mike ...

phphtmljsonajax

What is the reason behind Chrome's fullscreen mode turning the background black?

I created a webpage with full-screen functionality and made sure to use the correct CSS properties to ensure that my gradient background covers the entire screen perfectly. However, I encountered an issue when clicking the full-screen button in Chrome - th ...

javascripthtmlcssgoogle-chromefullscreen

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

javascriptjquerycssjquery-mobile

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

I find myself at a standstill with a project I want to tackle, but unfortunately, my knowledge of modern web development, particularly full stack, is minimal. As a result, I am completely clueless on how to proceed. Here is what I am familiar with and what ...

javahtmlcssweb-deploymentminecraft

Picking an item for alignment at the center with flexbox styling

What was the reason for specifying .footer-background to have a display: flex property in order to center the .copyright-text? Why did setting display: flex on .footer not achieve the desired result? .footer-background { background-color: #00008B; ...

htmlcssflexbox

Implement jQuery to toggle a class on click for added functionality

I am attempting to create a box that changes color when clicked. When the box is first clicked, it will turn red by adding the class red, and if clicked again, it will change to blue. The colors alternate with each click, but I am unsure of how to achieve ...

javascriptjqueryhtmlcss

Restrict the number of simultaneous image downloads in HTML

I am currently seeking the most effective solution for throttling image downloads in a Single Page Application. Issue: When on a slow network and navigating to a details page, there is an overload of image downloads occurring which pushes browser connect ...

htmlimage

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

javascripthtmlcssnuxt.js

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

I'm working on styling a text field in MUI to achieve the look shown in the image below: However, my current implementation looks like this: Currently, when I click inside the text field, the placeholder slides up and is positioned within the border ...

javascriptcssreactjsmaterial-ui

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

javascriptjquerycss