Button mit CSS-generiertem Pfeil

by Jens Grochtdreis

HTML

<button type="submit">Total toller Aufforderungstext</button>

CSS

body {padding: 40px;}

button {display: block; width: 250px;margin: 0;padding: 10px 0;border: none; text-align: left; text-indent: 25px;}
button {
    position: relative;
    color: #fff;
    background-color: #d53c29;
    background-image: -moz-linear-gradient(top, #d53c29 0%, #ae372c 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d53c29), color-stop(100%,#ae372c));
    background-image: -webkit-linear-gradient(#d53c29, #ae372c); 
    background-image: linear-gradient(top, #d53c29, #ae372c);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d53c29', endColorstr='#ae372c',GradientType=0 ); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#d53c29, endColorstr=#ae372c,GradientType=0 )";
}
button:hover,
button:focus {
    color: #828282;
    background-color: #f6f6f7; 
    background-image: -moz-linear-gradient(top, #f6f6f7 0%, #dfdfe2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f7), color-stop(100%,#dfdfe2)); 
    background-image: -webkit-linear-gradient(#f6f6f7, #dfdfe2); 
    background-image: linear-gradient(top, #f6f6f7, #dfdfe2);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f7', endColorstr='#dfdfe2',GradientType=0 ); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#f6f6f7, endColorstr=#dfdfe2,GradientType=0 )";
}
button:before {
    content: ""; display: block; position: absolute; top: 12px; left: 10px;
    border-style: solid; 
    border-color: transparent transparent transparent #fff; 
    border-width: 5px 5px 5px 7px; }
button:hover:before { border-color: transparent transparent transparent #828282; }