0

enter image description here

I wish to create the above button with only css However, the button text i cannot move upward align with the button. Any idea?

body {
  padding: 100px;
}

a {
  border-top: 50px solid red !important;
  border-left: 25px solid transparent !important;
  border-right: 25px solid transparent !important;
  height: 0;
  width: 150px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
}
<a href="#">Read More</a>

https://codepen.io/w3nta1/pen/aRMEzK

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
clement
  • 91
  • 1
  • 8

3 Answers3

1

That's because you have the border on the top. Here's a working example:

body { padding:100px; }
a { 
    width: 200px;
 font-size: 14px; 
 letter-spacing: 1px; 
 color:#000; 
 text-transform: uppercase;
    text-decoration:none;
    position: relative;
    display: flex;
    align-items: center;
}

a:before {
  content: "";
  border-top: 50px solid red !important;
  border-left: 25px solid transparent !important;
  border-right: 25px solid transparent !important;
  width: 150px;
  position:absolute;
}

span {
  z-index: 10;
  margin: 0 auto;
  position: relative;
  display: table;
  color: white;
}
<a href="#"><span>Read More</span></a>
Christopher Dosin
  • 1,301
  • 9
  • 15
1

There is solution without using flex, table, ... for display

body { padding:50px; }
a { 
   border-top: 50px solid red !important;
    border-left: 25px solid transparent !important;
    border-right: 25px solid transparent !important;
    height: 0;
    width: 150px;
   font-size: 14px; 
   letter-spacing: 1px; 
   color:#000; 
   text-transform: uppercase;
  text-decoration:none;
  position:relative;
  display:inline-block;
}
a span {
  position:absolute;
  left:0; right:0;
  top:-50px;
  height:50px;
  text-align:center;
  line-height:50px;
}
<a href="#"><span>Read More</span></a>
<a href="#"><span>About</span></a>

Into css for a add position:relative; display:inline-block;. Since, a is height of 50px, "under" a add span element.

span will be positioning/filled into a using position:absolute and top:0; let:0; right:0, but, instead bottom:0 I use height:50px; (from Your css for a border-top: 50px solid red !important;). At the end, align text into center (text-align:center;) and use line-height:50px; for vertically centering text.

Using this way You'll use basic css. This will work event on IE7.

nelek
  • 4,074
  • 3
  • 22
  • 35
0

Here is more Simple One. Play with some paddings if you don't like this one. For More shapes, check this link.

body { padding: 100px; }

a{
  color: white;
  background: red;
  padding: 20px 40px;
  text-decoration: none;
  font-weight: bold;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
<a href="#">Hello World</a>
Arsalan Khattak
  • 768
  • 2
  • 8
  • 16