How to Customize Style Hyperlink Buttons in CSS3

How to Customize Style Hyperlink Buttons in CSS3: BY Frank13 Nov,2020; Tags:
CSS3 Animation Hyperlink

Introduction

Hyperlinks and buttons are the most basic elements in web pages. We can make some simple adjustments to the appearance of links by setting CSS styles, such as text size, color, and underline. Today we share a custom style hyperlink button based on CSS3, and there are various animation effects after the mouse is over the link.

Instructions

HTML Body Code

<div class="section">
	<div class="section__item">
		<div class="section__box">
			<a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element2">
				<span class="ai-element__label">I'm a link</span>
			</a>
		</div>
		<div class="section__box">
			<button class="r-button ai-element ai-element_padding-bottom ai-element2">
				<span class="ai-element__label">I'm a button</span>
			</button>		
		</div>
	</div>
</div>
<div class="section">
	<div class="section__item">
		<div class="section__box">
			<a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element3">
				<span class="ai-element__label">I'm a link</span>
			</a>
		</div>
		<div class="section__box">
			<button class="r-button ai-element ai-element_padding-bottom ai-element3">
				<span class="ai-element__label">I'm a button</span>
			</button>		
		</div>
	</div>
</div>

Css Code

body{
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
  font-size: 16px;
  margin: 0;
  text-transform: uppercase;
}

@media (min-width: 1200px){
	
 .secs{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
 }	
}

.section{
  display: flex;
  min-height: 300px;	
  text-align: center;
	
  font-size: 17px;
  font-weight: 700;
}

.section:nth-child(2n+1){
  background-color: #f1f4fa;
}

.section__item{
  margin: auto;
}

.section__box:nth-child(n+2){
  margin-top: 40px;
}

VIEW NOW