CTA

Developer
Eric Rogg
Size
2,367 Kb
Views
32,384
  1. CTA Previews
  2. CTA HTML Codes
  3. CTA CSS Codes

How do I make an cta?

What is a cta? How do you make a cta? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.

CTA Previews
IQ Test

CTA - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CTA</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ui buttons"> <div class="ui button">Learn More</div> <div class="or"></div> <div class="ui positive button">Sign Up</div>
</div>
</body>
</html>

CTA - Script Codes CSS Codes

body { font-family: 'open sans', sans-serif; background:#5a5a5a; margin-left:20%; margin-top:20%; }
.ui.button { cursor: pointer; display: inline-block; vertical-align: middle; min-height: 1em; outline: none; border: none; background-color: #FAFAFA; color: #808080; margin: 0em; padding: 0.8em 1.5em; font-size: 1rem; text-transform: uppercase; line-height: 1; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
/******************************* States
*******************************/
/*-------------- Active
---------------*/
.ui.buttons .active.button,
.ui.active.button { background-color: #EAEAEA; background-image: none; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; color: rgba(0, 0, 0, 0.7);
}
/*-------------- Hover
---------------*/
.ui.button:not(.loading):hover { background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); color: rgba(0, 0, 0, 0.7);
}
.ui.button.active:hover { background-image: none;
}
.ui.button:hover .icon,
.ui.button.hover .icon { opacity: 0.85;
}
/*-------------- Down
---------------*/
.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active { background-color: #F1F1F1; color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
}
/*------------------- Or Buttons
--------------------*/
.ui.buttons .or { position: relative; float: left; width: 0.3em; height: 1.1em; z-index: 3;
}
.ui.buttons .or:before { position: absolute; top: 50%; left: 50%; content: 'or'; background-color: #5a5a5a; margin-top: -0.1em; margin-left: -0.9em; width: 1.8em; height: 1.8em; line-height: 1.55; color: #fff; font-style: normal; font-weight: normal; text-align: center; border-radius: 500px; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
.ui.buttons .or:after { position: absolute; top: 0em; left: 0em; content: ' '; width: 0.3em; height: 1.7em; background-color: transparent; border-top: 0.5em solid #5a5a5a; border-bottom: 0.5em solid #5a5a5a;
}
/*--------------- Positive
----------------*/
.ui.positive.buttons .button,
.ui.positive.button { background-color: #5BBD72 !important; color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active { background-color: #58CB73 !important; color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active { background-color: #4CB164 !important; color: #FFFFFF;
}
/******************************* Groups
*******************************/
.ui.buttons { display: inline-block; vertical-align: middle;
}
.ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.ui.buttons .button:first-child { border-left: none;
}
.ui.buttons .button { float: left; border-radius: 0em;
}
.ui.buttons .button:first-child { margin-left: 0em; border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em;
}
.ui.buttons .button:last-child { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em;
}
CTA - Script Codes
CTA - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 4
Size 2,367 Kb
Views 32,384
Do you need developer help for CTA?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Rogg (er40) Script Codes
Name
Casestudy
Dark Social Navigation
Simple List
Widget
Sign Up Form
Google Play Ratings
Tri color loader test
Simple Animated Buttons Inspired by Material Design
CSS Search Hover Animation
Collapsing Widget
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!