webinista/long-button.css

## long-button.css
body {
    font: 200 18px / 1.5 Arial,sans-serif;
}
.long-button {
    box-sizing: border-box;
    background: rgba(153,50,204,.95);
    color: whitesmoke;
    font: inherit;
    border: 1px solid transparent;
    text-align: left;
    position: relative;
    padding: .5rem 3rem .5rem .5rem;
    overflow: hidden;
    border-radius: 3px;
}
.long-button:hover {
    background: darkorchid;
}
.icon {
    display: inline-block;
    background: rgba(255,255,255,.6);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0;
    line-height: 1;
}
/*
Uses vertical centering technique outlined here:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
*/
b {
    font-weight: 100;
    display: block;
    position: relative;
    top: 50%;
    -ms-transform:  translateY(-50%) rotate(90deg); /* For IE9 */
    -webkit-transform: translateY(-50%) rotate(90deg); /* For Safari < 9 */
    transform: translateY(-50%) rotate(90deg); /* For most other browsers */
    padding: .5rem;
}

## long-button.html
<!DOCTYPE html>
   <html lang="en-US" class="no-js">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Long buttons with wrapping text and an icon</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="long-button.css">
    </head>
    <body>
    	  <!-- View the demo: http://demos.tiffanybbrown.com/longbutton/ -->
        <button type="button" class="long-button">
          This is really long button text. All of the text needs to show, but it also needs to wrap. The icon stays vertically centered even as the height of the button grows.
          <span class="icon"><b>▲</b></span>
        </button>


    </body>
</html>
	body {
	font: 200 18px / 1.5 Arial,sans-serif;
	}
	.long-button {
	box-sizing: border-box;
	background: rgba(153,50,204,.95);
	color: whitesmoke;
	font: inherit;
	border: 1px solid transparent;
	text-align: left;
	position: relative;
	padding: .5rem 3rem .5rem .5rem;
	overflow: hidden;
	border-radius: 3px;
	}
	.long-button:hover {
	background: darkorchid;
	}
	.icon {
	display: inline-block;
	background: rgba(255,255,255,.6);
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	padding: 0;
	line-height: 1;
	}
	/*
	Uses vertical centering technique outlined here:
	http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
	*/
	b {
	font-weight: 100;
	display: block;
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%) rotate(90deg); /* For IE9 */
	-webkit-transform: translateY(-50%) rotate(90deg); /* For Safari < 9 */
	transform: translateY(-50%) rotate(90deg); /* For most other browsers */
	padding: .5rem;
	}
	<!DOCTYPE html>
	<html lang="en-US" class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Long buttons with wrapping text and an icon</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="long-button.css">
	</head>
	<body>
	<!-- View the demo: http://demos.tiffanybbrown.com/longbutton/ -->
	<button type="button" class="long-button">
	This is really long button text. All of the text needs to show, but it also needs to wrap. The icon stays vertically centered even as the height of the button grows.
	<span class="icon"><b>▲</b></span>
	</button>


	</body>
	</html>