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

before sending the url with fetch(url), it is adjusted

My front end code is currently fetching a URL from a local node.js server using the following snippet: fetch('http://localhost:3000/search/house') .then(.... Upon checking what is being sent to the server (via the network tab in Firefox dev ...

javascripthtml

Converting text into HTML format using Nextjs and React

Currently, I am working on a project that involves using Next.js and React. I am considering creating my own component to parse text based on certain conditions, but I am unsure if something similar already exists. My goal is to: Format the content in HT ...

htmlreactjsparsingnext.js

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

htmlcsstwitter-bootstrapmobile

Limiting ng-repeat in AngularJS when the last item on the object is reached

I have a large object being repeated using ng-repeat, and it runs smoothly on Chrome and Opera. However, when it comes to browsers like Mozilla and IE, the performance is very slow. I tried implementing pagination, which helped speed things up, but ideally ...

javascripthtmlangularjsangularjs-ng-repeat

Ensure that the div expands to accommodate the content

I'm experiencing an issue where the content within a div with a blue border exceeds the boundaries of the div when it expands. How can I make sure that the div extends to contain all the content? Here is a demonstration of the problem: When I expand ...

htmlcss

"Utilize an HTML input to query and retrieve data stored in a

Seeking to retrieve data from my MySQL database and display it on the website securely. List of existing files: /includes db_connect.php functions.php getdata.php logout.php process_login.php psl-config.php register.inc.php /j ...

javascriptphphtmlmysql

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...

htmlcssimagealignment

PHP: Syntax error: unexpected empty string (T_ENCAPSED_AND_WHITESPACE)

When trying to retrieve values from a SQL database and set them as unique options for Radio buttons, I am encountering an error. I believe the issue lies in how I am passing PHP code within the value parameter. Can someone please provide guidance on how to ...

phphtmlsql

HTML block failing to implement Bootstrap styling

I am struggling to integrate Bootstrap into Drupal. I have used the 'row' class for the contact ID and added col-sm-12 for title and desc, but it is not working as expected. The width of the container seems off. Also, the accordion.js script work ...

jqueryhtmlcss

Is it possible to host three separate web pages within a single Firebase project on Firebase Hosting?

Imagine I have set up a project called ExampleApp on Firebase. I've designed a page with a form for users to submit data, hosted by Firebase. The Cloud Firestore database is storing this submitted data when the user completes the form and hits submit ...

htmlcssfirebasefirebase-authenticationfirebase-hosting

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

What steps should I take to fix the "loading page" issue in VS2010?

Upon attempting to debug (F5) my website, I encountered the following error message: "Firefox cannot locate the server at www.localhost.com." Switching to IE did not resolve this issue either. Any suggestions on how to fix this problem would be greatly ...

asp.netvisual-studio-2010html

applying a margin to the cover div

I am currently working on a #cover element with the following CSS styling: #cover { background-color: #FFFFFF; height: 100%; opacity: 0.4; position: fixed; width: 100%; z-index: 9000; } The goal is to have it cover the entire visi ...

csscompiler-constructionmargin

What is the best way to select the initial descendant that matches a specific

How can we target only the first matching descendant element, without affecting others further down the hierarchy? For example: If the HTML structure is like this: <div class="wrapper"> <table> <tbody> <tr> < ...

css

Submit data in the manner of a curl request

Instead of using a curl command to push a file to a web server, I am attempting to create a simple webpage where I can select the file and submit it. Here is the HTML and JavaScript code I have written for this purpose: <html> <body> <i ...

javascripthtmlcurlboost-asio

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

htmlcss

Properly aligning sub-divs within a parent div using CSS

I'm facing a problem with my CSS styling that I need help with. Here is the screenshot of the issue I am trying to center align the inputs, each placed in its own div, within my form. Below is the HTML markup for the form: HTML Markup Code CSS st ...

htmlcssalignmentstylesheetmarkup

Is there a way to modify the CSS of the sequential number element when it is clicked on?

I've successfully utilized jQuery to create sequential numbering for my menu items. Upon clicking, the hyperlink text changes color to red. However, I'm facing an issue where I want the corresponding number to also change to red when the hyperli ...

javascriptjqueryhtmlcss