Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="wrapper">
	<h1>SVG Icon Buttons</h1>
	<p class="max-w">Simple buttons with vertically aligned SVG icons in a variety of styles. <a href="https://google.github.io/material-design-icons/" target="_blank"><strong>Icons found here.</strong></a> *These buttons use Flexbox, if you need to support IE9, you're out of luck :(</p>
	
	<!-- basic -->
	<p>
		<a href="" class="btn red">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn pink">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn purple">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn blue">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- static -->
	<p>
		<a href="" class="btn red">Static<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn pink">Static<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn purple">Static<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn blue">Static<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- style 1 -->
	<p>
		<a href="" class="btn btn--style1 red">Style 1<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style1 pink">Style 1<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style1 purple">Style 1<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style1 blue">Style 1<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- style 2 -->
	<p>
		<a href="" class="btn btn--style2 red">Style 2<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style2 pink">Style 2<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style2 purple">Style 2<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style2 blue">Style 2<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- style 3 -->
	<p>
		<a href="" class="btn btn--style3 red">Style 3<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style3 pink">Style 3<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style3 purple">Style 3<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style3 blue">Style 3<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- style 4 -->
	<p>
		<a href="" class="btn btn--style4 red">Style 4<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style4 pink">Style 4<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style4 purple">Style 4<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--style4 blue">Style 4<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<!-- large -->
	<p>
		<a href="" class="btn btn--large red">Large<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--large pink">Large<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--large purple">Large<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn btn--large blue">Large<svg class="btn-icon" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<h3>Wrapped inside of a Flexed container.</h3>
	<p class="flex">
		<a href="" class="btn red">Basic<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		<a href="" class="btn pink">Basic<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
	
	<p class="flex">
		<a href="" class="btn red">Basic<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		<a href="" class="btn pink">Basic<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		<a href="" class="btn purple">Basic<svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
	</p>
</main>
<a href="http://ettrics.com/code/svg-icon-buttons/" class="logo" target="_blank">
 <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
</a>
              
            
!

CSS

              
                $space 	= 25px
$black 	= lighten(black, 10)
$red 		= #F44336
$pink 	= #E91E63
$purple = #9C27B0
$blue 	= #2196F3
$teal 	= #009688
$green 	= #4CAF50
$yellow = #FFEB3B

$ease()
	transition: all .3s cubic-bezier(0.23, 1, 0.32, 1)

*
	box-sizing border-box
	
body
	line-height 1.5
	font-family 'Source Sans Pro'
	-webkit-font-smoothing antialiased

a
	text-decoration none
	color inherit

h1
	line-height 1.3
	
p, h1, h3
	margin 0 0 $space 0

.wrapper
	min-height 100vh
	padding: 10vh 10vw
	background snow
	
/* button base */
.btn
	display inline-flex
	align-items center
	justify-content space-between
	margin-bottom ($space/3)
	padding ($space/2.5) ($space)
	border-radius 2px
	line-height normal
	font-size 16px
	color white
	background white
	
	/* svg icon */
	&-icon
		will-change width, transform
		width 0
		height 24px
		padding 4px
		border-radius 50%
		fill white
		background rgba(black, 0.15)
		margin-left 0
		transform scale(0)
		$ease()
		
		/* if you want the icon visible always */
		&--vis
			width 24px
			transform scale(1)
			margin-left ($space/3)
	
	/* reveal svg icon */
	&:hover
		.btn-icon
			width 24px
			transform scale(1)
			margin-left ($space/3)
	
	/* large button */
	&--large
		font-size 20px
		
		.btn-icon
			height 28px
		
		&:hover
			.btn-icon
				width 28px
				
	/* styles */
	&--style1
		position relative
		z-index 1

		&:before
			will-change opacity
			content ""
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			z-index -1
			border-radius 2px
			background black
			opacity 0
			$ease()
			
		&:hover
			&:before
				opacity 0.2
				
	&--style2
		.btn-icon
			transform scale(0) rotate(-360deg)
			
	&--style3
		position relative
		z-index 1

		&:before
			will-change opacity
			content ""
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			z-index -1
			border-radius 2px
			background black
			transform scaleX(0)
			transform-origin left center
			opacity 0.2
			$ease()
			
		&:hover
			&:before
				transform scaleX(1)
				
	&--style4
		position relative
		z-index 1

		&:before
			will-change opacity
			content ""
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			z-index -1
			border-radius 2px
			background black
			transform scaleY(0)
			transform-origin center bottom
			opacity 0.2
			$ease()
			
		&:hover
			&:before
				transform scaleY(1)
			
/* block buttons */
.flex
	display flex
	
	> .btn
		flex 1
		margin-right 3px
		
		&:last-child
			margin-right 0
	
			
.max-w
	max-width 600px
	
/* color classes */

.red
	background $red
.pink
	background $pink
.purple
	background $purple
.blue
	background $blue
.teal
	background $teal
.green
	background $green
.yellow
	background $yellow

	
.logo
	position: fixed
	bottom: 3vh
	right: 3vw
	z-index: 2
	img
		width: 65px
		transform: rotate(0)
		-webkit-filter: invert(100%)
		filter: invert(100%)
		$ease()
		&:hover
			transform: rotate(180deg) scale(1.1)
    
  

	
              
            
!

JS

              
                
              
            
!
999px

Console