Is It Feasible to Create a Button with Angled Corners Solely Using CSS and Without Any Images?

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

Looking to create a button solely using CSS without any images? The challenge lies in the bottom-left and top-right corners, particularly when the button is on a non-solid background. Need help coming up with a universal solution using only CSS.

Feel free to check out a demo of the button here →

Here's a snippet of the HTML from the demo:

<div id="banner">
  <div id="button-box">
    <a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
  </div>
</div>

And the accompanying CSS:

#banner {
  background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 200px;
  text-align: center;
}

#button-box {
  padding: 50px 0;
}

/* Button styles */
.btn-cornered {
  /* CSS styling properties here */
}
cssbutton

Answer №1

Check out this creative approach using pseudo elements and a skewed span to create angled corners. The key is to hide the overflow on the button and carefully align the skewed borders from the span.

While this method involves an additional span and may seem delicate when adjusting font sizes, it does deliver the desired effect:

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: steelblue;
}

button {
  background: transparent;
  padding: 10px 20px;
  position: relative;
  border: none;
  margin: 20px;
  overflow: hidden;
  color: white;
}

button::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
  right: 15px;

  content: '';
  border-left: 1px solid white;
  border-top: 1px solid white;
}

button::after {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 15px;
  left: 15px;
  
  content: '';
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

button span {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: 15px;
  border: 1px solid white;
  transform: skew(45deg);
  transform-origin: bottom left;
}
<button>
  <span></span>
  Sign up &amp; Stay Connected
</button>

Answer №2

Creating Clip-path Shapes

To create unique shapes using CSS, you can utilize pseudo elements along with the clip-path property to achieve the desired effect. Keep in mind that clip-path may not be fully supported by browsers like IE and Edge, so it's important to test compatibility (Can I use). To simplify the process of adjusting values for the clip-path shape, you can refer to this helpful script - Codepen 

a {
  position: relative;
  padding: 8px 20px;
}

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
  clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}
<a href="#">Text Here</a>

Check out a live demo here - JS Bin

Answer №3

Many thanks to all for the fantastic solutions and suggestions provided! If you're interested, feel free to check out my solution here.

CSS:

.abutton {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    text-align: center;
    line-height: 1;
    font-size: 24px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
  }
  .abutton:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 8px;
    left: 0;
    border-left: 1px solid #ffffff;
  }
  .abutton:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 0;
    left: 15px;
    border-right: 1px solid #ffffff;
  }
  .abutton span {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  .abutton span:before,.abutton span:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
  }
  .abutton span:before {
    left: 8px;
    bottom: 0;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
  .abutton span:after {
    top: 0;
    right: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
  footer .abutton {
    font-size: 21px;
  }
  .abutton:hover {
    color: #666;
  }
  .abutton:hover span:before,.abutton:hover span:after {
    background-color: #fff;
  }
  #button-frame { 
    background: #666;
    min-height: 200px;
    padding: 20px; 
  }

HTML:

<div id="button-frame">
  <a class="abutton" href="#"><span></span>Discover more</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

Expanding div fills remaining space with scrollable content (Utilizing Bootstrap 4 Flexbox grid)

My code was running smoothly before I enabled flexbox support in Bootstrap 4 Alpha 3: Check out the working jsfiddle here However, once flexbox support was enabled, I hit a roadblock. I'm looking for a solution using Bootstrap 4 built-in Flexbox gri ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

How can I set the text to be in the center of a VML

For my email template, I need to center text over an image. Although I attempted a solution from this source, the image is not being displayed. Below is the code snippet: <div align="center" style="margin: 0; padding: 0;"> <table border="0" c ...

htmlcssemailoutlookvml

Tips for automatically displaying the first option as selected in an HTML Select dropdown

I have an HTML select element where I want the option chosen by the user to not be displayed in the box. Instead, I would like the box to always show the first option, regardless of what the user selects from the dropdown menu. Below is my CSS code for sty ...

javascriptjqueryhtmlcss

The bottom margin fails to function as expected

I've been trying to position a loading image at the bottom right of the page, but everything seems to be working except for the margin-bottom. <div id="preload"> <div align="right" style="margin-bottom:40px; margin-right:50px;"> ...

htmlcssalignmentmargin

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml

The overriding of Tkinter button state

My current project involves creating a tic-tac-toe game using tkinter. I am facing an issue where, after the second turn, disabled buttons are reverting back to their normal state even though they have been marked. This results in the game malfunctioning ...

pythonbuttontkinterstate

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

Turning off arrow key navigation for tabs in Material UI ReactJS

I'm currently utilizing ReactJS Material UI tabs navigation. My aim is to deactivate the arrow keys navigation of Tabs in Material UI. What I desire is to navigate using the Tab key, and upon pressing Enter, it should display the page beneath that ta ...

javascripthtmlcssreactjsmaterial-ui

Navigation Bar with Dropdown Feature not Functioning Properly in CSS and HTML

I recently developed a website using CSS, HTML, and PHP. The main focus of my work has been on improving the navigation bar in the header section. However, after several hours of tweaking, I finally achieved the desired look for the navigation bar. Unfortu ...

htmlcssnavnavbar

Is it possible to optimize javascript & css bundling for a static website using webpack?

I have been working on organizing my javascript files for a static HTML website. Currently, they are scattered across different HTML files using the script tag. To streamline this, I have created a main.js file that requires all the other files. This main ...

javascriptjqueryhtmlcsswebpack

Unexpected CSS counter reset issue encountered within nested elements

Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters. Below is a snippet of the code that demonstra ...

htmlcss

Unexpected Placement of Bootstrap 4 Table Spinner in Chrome and Internet Explorer

I am struggling to create a dynamic spinner within a table's tbody using Bootstrap 4. Here is what I have attempted so far: HTML <div class="container mt-2"> <div class="card"> <div class="card-body"> <div class="row"> ...

cssbootstrap-4

Navigating the jQuery Search Form: Redirecting to Pages within your Website

After successfully creating my first Javascript search form with an Autocomplete Script, I am facing a challenge. I want to enable users to press "enter" after searching for a product and get redirected to the corresponding product URL page. The operation ...

javascriptjquerycsshtml

Style your div with CSS to include a border around the content

As a CSS beginner, I am attempting to create a div element with a border, similar to the design shown in the image below: https://i.sstatic.net/fGy2u.png Here's my HTML code: <div class="mystyle"> <h3>header message<h3> <p& ...

htmlcss

Struggling to center a div within another div using margin auto

Hey there, I'm looking for some help with my code. Here's what I have: .center{ width: 100%; margin: 0 auto; border: 1px solid red; } .nav{ background: #606060; width: 90%; } HTML <!DOCTYPE html> <html> < ...

htmlcss

Maintain the transformed :after element within the designated target in CSS

Having trouble with menu styling. This is how the menu looks: https://i.sstatic.net/pqzBm.png Styling for each element is as follows: .gallery-navi-element { position: relative; float: left; text-align: center; font-size: 1.7em; pad ...

htmlcss

Can curly braces be utilized in the style section of Vue.js?

Can I utilize curly braces in the style section of vue.js to set a value? For instance .container { background: url({{ image-url }}; color: {{ color-1 }} } ...

javascriptcssvue.jsvuejs3

Tips for effectively documenting CSS on a extensive website

Our website is quite extensive, with numerous pages. As we've added more pages, the amount of HTML and CSS has also increased. We're wondering if there's an efficient way to document all of this information. For example, how can we easily de ...

htmlcss