JSFiddle - React, Tailwind, and code Playground
by Plippie Plop
HTML
<div id="lex-button"><a href="mailto:[email protected]?SUBJECT=Write%20to%20Alex">Write lex a text</a></div>
CSS
#lex-button{
padding:2em;
border-radius:6px;
border:1px solid #afafaf;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
a{
margin:0 auto;
display:block;
width:150px;
height:50px;
line-height:50px;
font-weight:bold;
font-family:verdana, san-serif;
color:rgba(155,75,75,1);
text-decoration:none;
text-align:center;
font-size:16px;
text-shadow:0px -1px 0px rgba(0,0,0,.4),0px 1px 0px rgba(255,255,255,.6);
border-radius:6px;
box-shadow: 0px 3px 4px 0 rgba(0,0,0,.4);
background: rgb(255,175,75);
background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1)));
background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
background: -o-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
}
a:hover{
...