button with arrow and hover over effects

3:25 am, March 5, 2018

Code

html

css

a.more-button-arrow:hover {
	opacity:0.9;
	box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	margin-top:0px;
	margin-bottom: 11px;
}
a.more-button-arrow {
	margin-top:1px;
	margin-bottom:1px;
	text-decoration:none;
	background:#53a25a linear-gradient(#468e4c, #53a25a);
	border-radius:3px;
 	display: inline-block;
    	padding: 12px 20px;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	color: #FFF;
    	font-family: "Muli", sans-serif;
    	font-weight: bold;
    	text-transform: uppercase;
    	font-size: 16px;
    	text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	border:0px solid rgba(255,255,255,0.3);
}
.more-button-arrow:after {
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3));
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQxOUE2QjZGRkM2MTFFNzkzOUJDRkZGMTgyRDk1QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQxOUE2QjdGRkM2MTFFNzkzOUJDRkZGMTgyRDk1QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDE5QTZCNEZGQzYxMUU3OTM5QkNGRkYxODJEOTVCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDE5QTZCNUZGQzYxMUU3OTM5QkNGRkYxODJEOTVCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpBPY3MAAAB+SURBVHjaYvj//38bEHsAMQOpGERoAPFPID5BqiEwRst/BCDaEBiDE4jv/kcFBA1B5nj+xw5wGoIusPo/boBhCLpmaSD+9B8/gBuCzS8z/hMHppNj83kgDgBiRlL8DNdESmhjaCImnnFqwpfCCGrClraJ1oSsuZdUTTAMEGAASU/wWFto4zkAAAAASUVORK5CYII=') center right no-repeat;
    padding-right: 10px;
    content: "";
    padding-left: 20px;
}

scripts

Download & Run

Download File Run Demo Re-load Preview